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

Question

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

在第二个 table 中，我想要一个带有水平滚动条的大型 table。除了 table 总是跳到导航栏下方并且我无法将其呈现在右侧之外，我能够实现此目的。

见附件fiddle：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>

我想要实现的是将 table 渲染到导航丸的右侧，就像当您单击 'JSON' 丸时渲染文本区域一样。

你能帮忙吗？

Answer 1

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

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

<div class="row flex-nowrap">

如果所有内容都排成一行，您会发现 table 的大小导致它溢出。您已经在使用 Bootstrap 的 table-responsive class。将 overflow-hidden 放在包含 table 的列上以将内容保留在行内。

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

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

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

Bootstrap 5: Table in a second column jumps below the first column

html

css

layout

html-table

bootstrap-5