Bootstrap 两列布局错位答案

【问题标题】：Bootstrap Two Column Layout MisalignmentBootstrap 两列布局错位
【发布时间】：2014-08-30 16:55:29
【问题描述】：

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

但我无法将图像列与顶部大图像对齐。我可以添加一个边距为 -15px 的类，但 XS 屏幕尺寸会出现错位。

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

你们能否建议我做错了什么以及我应该如何在 Bootstrap 3 中处理两列布局？

【问题讨论】：

【解决方案1】：

下方框中的<div class="col-sm-12"> 引起了问题。您有两种选择：

您实际上是在创建一个嵌套网格，而引导程序要求您以新的 <div class="row"> 开始每个新的嵌套级别

【讨论】：

【解决方案2】：

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

这就是为什么

网格由 3 个部分组成：容器、行和列...

容器有 15px 的内边距。该行以 -15px 的边距否定容器填充。列有 15px 的内边距，将内容从容器的边缘拉开并创建一致的 30px 间距。

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

我保证，一旦融入其中，让网格每次都按照你想要的方式运行将是一件轻而易举的事。

【讨论】：

【解决方案3】：

你需要添加：

.custom-left {    
    padding: 0;
}

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

【讨论】：