Div 标签与 Bootstrap 对齐

Question

我敢肯定这个问题已经回答了很多次了 - 但我在这里搜索时运气不佳...

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

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

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

Bootstrap CSS 中是否有一些内置的东西可以容纳？是否需要多个 'containers'？我宁愿不添加 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 中没有 .row-fluid class 3. 对于此设计，您只需要一个 .row 并且您将使用助手class .pull-right 第3节元素如下：

<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-* classes 默认应用了 float: left。这意味着如果你在第 3 列中有很长的内容，当剩下的两列换行时，它们与前两列之间会有一个间隙，等于第 3 列的高度。我们可以通过让第三列向右浮动来解决这个问题。这就是 class .pull-right 的作用——它将 float: right 应用于使用它的元素。

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

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

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

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

Div 标签与 Bootstrap 对齐

Div tag alignment with Bootstrap

html

alignment

twitter-bootstrap

twitter-bootstrap-3

Bootply