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行列的行。关闭此行后，我想在其下方直接显示另一行，但该行显示在图像下方。

（'front-col'选择器不相关[我相信] - 它将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

引导容器/列/行不合适

1 个答案: