Bootstrap 中的两个并排表格

Question

是否可以在 Bootstrap 3 中并排显示两个表格？

每个人都尝试制作每一个 col-md-6，虽然它缩小了宽度，但它们不会彼此相邻换行（而是在全角视图中一个位于另一个的顶部）。

 <div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th class="col-md-1">#</th>
                  <th class="col-md-2">Header</th>
                  <th class="col-md-3">Header</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="col-md-1">1,001</td>
                  <td class="col-md-2">1,001</td>
                  <td class="col-md-3">1,001</td>
                </tr>
                <tr>
                  <td class="col-md-1">1,001</td>
                  <td class="col-md-2">1,001</td>
                  <td class="col-md-3">1,001</td>
                </tr>
                 <tr>
                  <td class="col-md-1">1,001</td>
                  <td class="col-md-2">1,001</td>
                  <td class="col-md-3">1,001</td>
                </tr>
              </tbody>
            </table>
          </div>
          <h2 class="sub-header">Latest Incidents</h2>
          <div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th class="col-md-1">#</th>
                  <th class="col-md-2">Header</th>
                  <th class="col-md-3">Header</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="col-md-1">1,001</td>
                  <td class="col-md-2">1,001</td>
                  <td class="col-md-3">1,001</td>
                </tr>
                <tr>
                  <td class="col-md-1">1,001</td>
                  <td class="col-md-2">1,001</td>
                  <td class="col-md-3">1,001</td>
                </tr>
                 <tr>
                  <td class="col-md-1">1,001</td>
                  <td class="col-md-2">1,001</td>
                  <td class="col-md-3">1,001</td>
                </tr>
              </tbody>
            </table>

Answer 1

您需要将每个表格包装在 col-6 div 中，而不是将 col-6 应用于表格本身。这是包含 col-xs-6 的代码：

<div class="col-xs-6">
  <h2 class="sub-header">Subtitle</h2>
  <div class="table-responsive">
    <table class="table table-striped">...

它正在运行：http://www.bootply.com/lbrQZF3152

Answer 2

将 col-md-6 类添加到每个包装 div 中，这样你就有了这样的结构：

<div class="table-responsive col-md-6">
    <table>...</table>
</div>
<div class="table-responsive col-md-6">
    <table>...</table>
</div>

Answer 3

Shawn 和 kmo 已经指出使用

col-md-6

类将使这项工作成功。 我还想补充一点，如果您在

ul

和

li

内执行此操作，事情可能会破裂。

解决方案很简单。只需在前面添加一个带有

row

类的 div：

<div class="row">
  <div class="table-responsive col-md-6">
      <table>...</table>
  </div>
  <div class="table-responsive col-md-6">
      <table>...</table>
  </div>
</div>

Answer 4

我有更好的解决方案。对于像我一样寻找旧答案的人。 使用容器（如 div），这将包含您拥有的每个表，在此之后，您将在该容器中放入： 样式=“显示：弯曲” 快完成了，你会将表格排成一行，最后一件事是放置边框，仅此而已。 flex 会将您的表格分成相等的部分，填充您拥有的所有窗口，无论窗口大小如何。 参考： https://developer.mozilla.org/es/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox