Question

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

如果我有三行，如何添加一个跨越右边所有三行高度的独立列？ E.g：

[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]

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

Answer 1

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

EG -

.row-eq-height

Answer 2

你想要这样的东西吗？您可以使用类.row-eq-height { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }，CSS类如下。

div {
  border: 1px solid black;
}

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

＆＃13;

<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>

＆＃13;

'from' : '1111111111'

＆＃13;

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

2 个答案: