如何在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]

我怎样才能让行“结束”这样我就可以跨越整个高度到右侧添加列独立于它们的？

来源

2017-09-16 AlwaysQuestioning

你能不能给任何截图或代码..？ –

没有足够空间设置另一列，因为您正在使用行中的所有12列 – user1844933

你要这样呢？您可以使用类.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>

来源

2017-09-16 05:09:23

你可以简单地做到这一点是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>

来源

2017-09-16 05:09:18 RafatMunshi

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

回答

相关问题