3

我似乎无法解决这个问题。
如何在引导网格系统中制作此表？

这是一个常规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>
4

1 回答 1

2

所有引导网格行都采用 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>

Fiddle 中的工作演示

截屏

于 2014-05-20T18:24:15.933 回答