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

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

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

---

编辑 - 在您发表评论后，我重新考虑了我的答案。有办法做到这一点。我已经从我的第一个答案中修改了 html。关键项目是下面的“pull-right”类。详情请参阅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 文件

Answer 2

当您希望某些内容在移动设备上充满时，其类将是“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>