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

当你想在移动设备上播放一些东西时，它的类将是“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。关键项目是＆＃34; pull-right＆＃34;下面的课程。有关详细信息，请参阅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列位置

2 个答案: