Bootstrap 5：第二列中的表跳到第一列下方

Question

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

在第二个表中，我想要一个带有水平滚动条的大表。我能够做到这一点，只是表格总是跳到导航栏下方并且我无法将其呈现到右侧。

请参阅随附的小提琴：https://jsfiddle.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”药丸时呈现文本区域一样。

你能帮忙吗？

Answer 1

Bootstrap 中的行是弹性容器，默认情况下允许包装。如果你想强制你的列在同一行，你需要防止这种换行。

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

<div class="row flex-nowrap">

所有内容都在一行中，您会发现表格的大小会导致其溢出。您已经在使用 Bootstrap 的 table-responsive 类。将overflow-hidden 放在包含表格的列上，以保持行内的内容。

<div class="col overflow-hidden"> <!-- tab content / table markup / etc -->

延伸阅读：https://getbootstrap.com/docs/5.0/utilities/flex/#wrap