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

我的问题是第二行中的列(靠近代码底部)没有出现在我的第一行下方，而是出现在图像下方。 IE。我在左侧的一列中有一个图像，在它的右侧我有一个包含 3 行列的行。关闭此行后，我想在其正下方再添加一行，但是，该行显示在图像下方。

(“front-col”选择器不相关 [我相信]——它将 3 列的 padding-left 设置为 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 .