引导程序5：第二列中的表跳到第一列下面

Question

我有一个网格布局，左列中的一些导航药丸设置为“col-auto”，因为我希望这些只占用内容的自然宽度空间。

在第二个表中，我希望有一个水平滚动条的大表。我能够做到这一点，除了表格总是跳到导航栏下面，我不能让它呈现到右边。

参见附件:https://jsfidle.net/3vxhd6jf/3/

<div class="container">
   <div class="row">
     <div class="col-auto"> <!-- Should only take up the necessary space -->
       <!-- Nav tabs -->
       <div class="d-flex align-items-start">
       .....
       </div>
     </div>
     <div class="col"> <!-- Should take up the rest of the space -->
       <div class="tab-content">
         <div class="tab-pane active" id="tab-data" role="tabpanel" aria-labelledby="nav-data">
           <div id="div-data-container" class="mb-3 table-responsive">
             <!-- The table -->
             <table class="table table-sm table-striped">
             .....
             </table>
           </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>    

我想要实现的是呈现导航药丸右边的表，就像当您单击'JSON'药丸时呈现textarea一样。

你能帮忙吗？

Answer 1

行是默认情况下允许换行的flex容器。如果要将它们强制到同一条线上，则需要防止这种包装。

将flex-nowrap类应用于您的行：

<div class="row flex-nowrap">

进一步阅读:https://getbootstrap.com/docs/5.0/utilities/flex/#wrap