使用 Bootstrap 对齐 Div 标签

Question

我确信这已经被回答了很多次 - 但我在这里搜索没有运气......

我是引导程序（和 div 标签）的新手...这是我花了一整天试图弄清楚的...我有 2 行。第一行有 3 列 (1,2,3)。第二个有 2 列 (4,5) 。我试图简单地“允许”“3”列延伸到“5”列及其旁边 - 目前第 4 列和第 5 列被推到低于 3 的末尾...

第“3”列可能包含一篇文章或联系表格 - 还不确定 - 无论哪种方式我都需要灵活性......

我通过将 4 嵌套到 1 和 5 嵌套到 2 成功地做到了这一点...但是当我在移动视图中查看时，第 3 列被推到第 5 节的末尾...我希望 3 在移动垂直中保持第 3 位查看列表..

Bootstrap 是否在 CSS 中内置了一些东西来适应？ 是否需要多个“容器”？ 我宁愿不添加 CSS，但如果这是唯一的方法，那就这样吧......谢谢！

我的代码：

<div class="row-fluid">
    <div class="col-md-4">
         <h2>section1 </h2>
    </div>
    <div class="col-md-4">
         <h2>section2 </h2>
    </div>
    <div class="col-md-4">
         <h2>section3 </h2>
    </div>
</div>
<div class="row-fluid">
    <div class="col-md-4">section4</div>
    <div class="col-md-4">section5</div>
</div>

Answer 1

我相信这就是您想要实现的目标：

Bootply

首先，Bootstrap 3 中没有 .row-fluid 类。对于此设计，您只需要一个 .row 并且您将在第 3 节元素上使用帮助器类 .pull-right，如下所示：

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-8">
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-6">
          <h2>Section 1</h2>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-6">
          <h2>Section 2</h2>
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4 pull-right">
      <h2>Section 3</h2> 
    </div>
    <div class="col-xs-12 col-sm-12 col-md-8">
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-6">
          <h2>Section 4</h2>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-6">
          <h2>Section 5</h2>
        </div>
      </div>
    </div>
  </div>
</div>

所以，这里发生的情况是 col-* 类默认应用了float: left。这意味着如果您要在第 3 列中有很长的内容，当剩余的两列换行时，它们与前两列之间会有一个间隙，等于第 3 列的高度。我们可以通过告诉第三列向右浮动来解决这个问题。这就是.pull-right 类所做的——它将float: right 应用于使用它的元素。

当第三列向右浮动时，第 4 列和第 5 列可以在 md 和 lg 断点（991px 及以上）处整齐地位于左侧浮动列 1 和 2 的正下方。但是，在 sm 和 xs 断点处，源顺序得到遵守，第 3 节显示在第 2 节下方和第 4 节上方的适当位置。

最后，使用单行允许所有列以 12 个网格单位换行。

**如果您的内容是动态的或长度不均匀，您可以使用 Bootply 中显示的将第 1 列和第 2 列以及第 4 列和第 5 列嵌套在一起的技术。

如果您是 Bootstrap 的新手，建议您查看我的回答 here 或 here，以帮助您更好地理解和可视化网格。