引导容器/列/行不合适

【问题标题】：Bootstrap containers/columns/rows out of place引导容器/列/行不合适
【发布时间】：2014-02-18 20:39:57
【问题描述】：

我在使用 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）

提前感谢您的帮助。

史密斯

【问题讨论】：

标签： css twitter-bootstrap-3 vertical-alignment

【解决方案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.

【讨论】：