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

Question

我似乎无法理解这一点 如何在引导网格系统中创建this table？

以下是常规table：

<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

所有引导网格行都使用12列布局。如果在一行中使用的列数超过12列，则额外的列字段将自动换行到下一行。由于左表和右表都定义为col-xs-8，第二个表将被碰到下一行（16> 12）。

请尝试col-xs-6：

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

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

当您嵌套行时，您将开始处理由新行类的父级约束的新的内部12列布局。我更新了您的内部行以使用以下内容：

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

Working Demo in Fiddle