twitter-bootstrap - 具有网格系统的多个嵌套列

Question

我似乎无法解决这个问题。
我如何制作 this table在 Bootstrap 网格系统中？

这是一个普通的表格:

<table>
  <tr>
    <td>
      <table>
        <tr>
          <td>a</td>
          <td>b</td>
        </tr>
        <tr>
          <td colspan="2">c</td>
        </tr>
      </table>
    </td>
    <td>
      <table>
        <tr>
          <td>d</td>
          <td>e</td>
        </tr>
        <tr>
          <td colspan="2">f</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

我尝试了以下方法:

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <div class="row">
                <!-- Left side -->
                <div class="col-xs-8">
                    <div class="row">
                        <!-- 1st column -->
                        <div class="col-xs-4">a</div>
                        <!-- 2nd column -->
                        <div class="col-xs-4">b</div>
                        <!-- colspan 2 -->
                        <div class="col-xs-8">c</div>
                    </div>
                </div>
                <!-- Right side -->
                <div class="col-xs-8">
                    <div class="row">
                        <!-- 3rd column -->
                        <div class="col-xs-4">d</div>
                        <!-- 4th column -->
                        <div class="col-xs-4">e</div>
                        <!-- colspan 2 -->
                        <div class="col-xs-8">f</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

所有 bootstrap 网格行都采用 12 列布局。如果您在一行中使用超过 12 列，额外的列字段将自动换行到下一行。由于左表和右表都定义为 col-xs-8，因此第二个表将跳到下一行 (16 > 12)。

尝试使用 col-xs-6 代替:

<!-- Left side -->
<div class="<b>col-xs-6</b>">

<!-- Right side -->
<div class="<b>col-xs-6</b>">

当您嵌套行时，您开始处理一个新的内部 12 列布局，该布局受新行类的父级约束。我会更新您的内部行以使用以下内容:

<div class="row">
    <!-- 1st column -->
    <div class="<b>col-xs-6</b>">a</div>
    <!-- 2nd column -->
    <div class="<b>col-xs-6</b>">b</div>
    <!-- colspan 2 -->
    <div class="<b>col-xs-12</b>">c</div>
</div>

Working Demo in Fiddle