如何在Bootstrap中的一组行的末尾添加长列?
问题描述:
这可能是一个简单的问题,但它造成了我的问题。如何在Bootstrap中的一组行的末尾添加长列?
如果我有三行,我该如何添加一个跨越所有三行高度的独立列?例如: -
[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]
我怎样才能让行“结束”这样我就可以跨越整个高度到右侧添加列独立于它们的?
答
你要这样呢?您可以使用类.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>
答
你可以简单地做到这一点是HTML,在你的表定义,使用rowspan。
EG-
<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>
你能不能给任何截图或代码..? –
没有足够空间设置另一列,因为您正在使用行中的所有12列 – user1844933