Bootstrap堆积列

Question

我有一个愚蠢的bootstrap问题。

代码：

<div class="row"> 
    <div class="col-sm-4" style="background-color:pink;"> lorem... </div> 
    <div class="col-sm-8" style="background-color:yellow;"> lorem... </div> 
    <div class="col-sm-4" style="background-color:pink;"> lorem... </div> 
</div> 

我想最后的粉红色DIV适合它上面的空间。 什么是最简单的方法来达到我的目标？

Answer 1

<div class="row"> 
    <div class="col-sm4"> 
     <div class="row"> 
      <div class="col-sm-12" style="background-color:pink;"> lorem... </div> 
      <div class="col-sm-12" style="background-color:pink;"> lorem... </div> 
     </div> 
    </div> 
    <div class="col-sm-8" style="background-color:yellow;"> lorem... </div> 
</div> 

Answer 2

组2列是这样的：

<div class="row"> 
    <div class="col-sm-4"> 
     <div class="col-sm-12" style="background-color:pink;"> lorem... </div> 
     <div class="col-sm-12" style="background-color:pink;"> lorem... </div> 
    </div> 

    <div class="col-sm-8"> 
     <div class="col-sm-12" style="background-color:yellow;"> lorem... </div> 
    </div> 
</div> 

所以，你现在已经2列：

• 4周的cols一个又一个8个COLS
• 每个孩子都有12周的cols的采取父母的最大宽度（4或8 cols）

Answer 3

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<div class="row"> 
 
    <div class="col-sm-4" style="background-color:pink;"> 
 
    <div class="row">lorem... top</div> 
 
    <div class="row">lorem... bottom</div> 
 
    </div> 
 
    <div class="col-sm-8" style="background-color:yellow;"> lorem... Yellow</div> 
 

 
</div>

希望它有助于