css - Bootstrap 两列布局错位

Question

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

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

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

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

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

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

这就是为什么

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

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

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

TBS 网格

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

score -1 · Accepted Answer

您需要添加：

.custom-left {    
    padding: 0;
}

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

3 回答 3