Question

我正在尝试创建一个简单的两列布局，其中有一个大图像后跟两列，左边一个用于图像，右边一个用于文本。

但我无法将图像列与顶部大图像对齐。我可以添加一个-15px边距的类，但是XS屏幕大小没有错位。

我可以为xs屏幕添加另外-15px的边距，然后我可能需要修复其他内容。这是一个基本的布局问题，我感觉我做错了。

你们可以建议我做错了什么，我应该如何处理Bootstrap 3中的两个列布局？

Answer 1

下方框中的<div class="col-sm-12">会导致问题。你有两个选择：

<div class="col-sm-12">

您实际上是创建了一个嵌套网格，并且引导程序要求您使用新的<div class="row">

Answer 2

@bspellmeyer是正确的。在Bootstrap中嵌套列时，需要添加row，然后添加嵌套列。

这是为什么

网格使用3个部分：容器，行和列......

容器有15px的填充物。该行以-15px的边距否定容器填充。色谱柱有15px的填充物，可将内容物从容器边缘拉出，形成一致的30px排水沟。

添加15px填充的目的只是否定了负行边距似乎很愚蠢，但是允许在其他列中嵌套列是必不可少的！请注意下图中红色轮廓指示的嵌套列如何整齐地嵌入封闭列中，而不会应用额外的填充。

TBS Grid

我保证一旦沉入其中，让网格的表现完全符合您的要求每次都会变得轻而易举。

Answer 3

您需要添加：

.custom-left {    
    padding: 0;
}

到 .custom-left 类。如果要将此div与顶部图像对齐，请将其添加到.custom-right类。