如何在 Bootstrap 中的一组行的末尾添加一个长列？答案

【问题标题】：How can I add a long column at the end of a set of rows in Bootstrap?如何在 Bootstrap 中的一组行的末尾添加一个长列？
【发布时间】：2018-02-25 06:37:48
【问题描述】：

这可能是一个简单的问题，但它给我带来了问题。

如果我有三行，如何在右侧添加一个跨越所有三行高度的独立列？例如：

[Row 1]                [Desired column]
  [col-xs-1]           ..............
  [col-xs-11]          ..............
[Row 2]                .............. 
  [col-xs-1]           ..............
  [col-xs-11]          ..............
[Row 3]                ..............
  [col-xs-1]           ..............
  [col-xs-11]          [end here]

如何使行“结束”，以便我可以添加一个独立于它们的列，该列跨越右侧的整个高度？

【问题讨论】：

可以给点截图或者代码吗..？
没有足够的空间来设置另一列，因为您正在使用行中的所有 12 列

标签： css twitter-bootstrap twitter-bootstrap-3 grid

【解决方案1】：

您可以简单地这样做是 html，在您的表定义中，使用 rowspan。

例如-

<table>
<thead>
  <tr>
    <th>first</th>
    <th rowspan="3">last</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>first row</td>

  </tr>
  <tr>
    <td>second row</td>

  </tr>
    <tr>
    <td>third row</td>
  </tr>
</tbody>
</table>

【讨论】：

【解决方案2】：

你想要这样的东西吗？可以使用.row-eq-height类，CSS类如下。

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

div {
  border: 1px solid black;
}

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row row-eq-height">
    <div class="col-xs-8">
      <div class="row">
        <div class="col-xs-4">
          adfs
        </div>
        <div class="col-xs-4">
          asdf
        </div>
        <div class="col-xs-4">
          asdf
        </div>
      </div>
      <div class="row">
        <div class="col-xs-4">
          asdf
        </div>
        <div class="col-xs-4">
          asdf
        </div>
        <div class="col-xs-4">
          asdf
        </div>
      </div>
    </div>
    <div class="col-xs-4" style="background-color:red;">

    </div>
  </div>
</div>

【讨论】：