Bootstrap容器/列/行不合适

Question

我在使用Bootstrap进行行和列对齐时遇到了一些问题。

<div class="container"> 
    <div class="col-md-3"> 
     <img src="/assets/images/home/youth.jpg">" alt="...." class="img-responsive"></img> 
    </div> 
    <div class="row"> 
     <div class="col-md-2 col-sm-2 front-col"> 
      col-md-2 
     </div> 
     <div class="col-md-2 col-sm-2 front-col"> 
      col-md-2 
     </div> 
     <div class="col-md-2 col-sm-2 front-col"> 
      col-md-2 
     </div> 
    </div> <!-- ./row --> 

    <div class="row"><!-- Row 2 --> 
     <div class="col-md-2 col-sm-2 front-col"> 
      col-md-2 
     </div> 
    </div> 

我在这里的问题是，在第二行（接近代码的底部）在列没有出现我下面的第一行，它的出现在图像的下方。即我在左边的一列中有一个图像，在这个右边有一排3行的列。关闭这一行后，我需要直接在它下面的另一行，但是，该行出现在图像下方。

（在“前山坳”选择是不相关的[我相信] - 它集填充左的3列5PX）

预先感谢任何帮助。

史密斯

Answer 1

您还没有裹第一.col-md-3一个.row内。如果你这样做，你的第二行将出现在它下面，而不是旁边。

<div class="row"> 
    <div class="col-md-3"> 
    <img src="http://placehold.it/100x100" alt="...." class="img-responsive"> 
    </div> 
</div> 

补充说明：

• 图片标签没有结束标签，像</img>。看到我上面的更正。
• 您错过了收盘箱div标签</div>。
• 如果您使用class="col-sm-2，则不需要也有col-md-2。只添加如果它们的列数对于较大的屏幕不同。
• 你不应该混淆网格结构div上的填充或边距。你提到你的.front-col改变了填充，但这很可能会打破网格。

Here's a demo。