Twitter Bootstrap 列位置

Question

我想在桌面上并排显示两列。

我想要在桌面上以下列顺序排列（第 2 列比第 1 列高）：

[Column 1][Column 2]
[Column 3]

我想在手机上订购以下列：

[Column 1]
[Column 2]
[Column 3]

这是我创建的示例：http://jsbin.com/folekajera/1/edit?html,css,output

示例的问题在于，在桌面视图中，第 1 列和第 3 列之间存在间隙。

如何消除这个差距？

Answer 1

当您希望在移动设备上完整显示内容时，其 class 将是 "col-xs-12"。

这是应该的。

<div class="row">
    <div id="first-col" class="col-xs-12 col-lg-4">
      Column 1
    </div>  
    <div id="second-col" class="col-xs-12 col-lg-8">
      Column 2
    </div>
   <div style="background-color:green" class="col-xs-12 col-lg-12">
     Column 3
   </div>
</div>

Answer 2

您在桌面视图中出现间隙的原因是 Bootstrap 的网格有 12 列/行。所以前两个 div 用完了整行的宽度。第三列实际上在它自己的行中。 Nitin 的回答有处理移动布局的正确方法。

因此，您实际拥有的有效html如下。

编辑 - 在您发表评论后，我重新考虑了我的答案。有一种方法可以做到。我修改了第一个答案中的 html。关键项目是下面的"pull-right" class。有关详细信息，请参阅 Column ordering。

<div id="second-col" class="col-xs-12 col-sm-4 pull-right">

我已经在 http://jsbin.com/rinejayojo/1/edit?html,css,output

更新了你的 jsbin 文件

Twitter Bootstrap 列位置

Twitter Bootstrap Column Positions

html

css

responsive-design

twitter-bootstrap

twitter-bootstrap-3