Bootply

Question

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

我是bootstrap（和div标签）的新手......这是我整天想要弄清楚的......我有2排。第1行有3列（1,2,3）。第二列有2列（4,5）。我试图简单地允许＆＃34;允许＆＃34;专栏＆＃34; 3＆＃34;延伸到和＃34; 5＆＃34; - 目前第4栏和第4栏5被推到3岁以下......

专栏＆＃34; 3＆＃34;可能包含一篇文章或联系表格 - 不确定 - 无论哪种方式我都需要灵活性......

我已经成功地将4嵌套成1＆amp; 5进2 ...但是当我在移动视图中查看时，第3列被推到第5部分的末尾...我希望3在移动垂直视图列表中保持3号..

Bootstrap是否内置了CSS中的内容以适应？是多个容器＆＃39;需要？我宁愿不添加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，并且您将使用帮助程序类.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- *类已经float: left应用了它们。这意味着如果你在第3列中有很长的内容，当剩下的两列包裹时，它们和前两列之间会有一个间隙，等于第3列的高度。我们可以通过告诉第三列向右浮动来解决这个问题。这就是.pull-right类所做的事情 - 它将float: right应用于它所使用的元素。

当第三列向右浮动时，第4列和第5列可以整齐地位于md和lg断点（991px及以上）的左浮动列1和2的正下方。但是在sm和xs断点处，源订单得到兑现，第3部分显示在第2部分和第4部分下方的正确位置。

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

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

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

Div标签与Bootstrap对齐

1 个答案:

Bootply