Twitter Bootstrap列位置 [英] Twitter Bootstrap Column Positions

问题描述

我有两列想要在桌面上并排显示.

I have two columns which I would like to display side by side on a desktop.

我要在台式机上执行以下列顺序(第2列比第1列高):

I want the following column order on a desktop (Column 2 is taller than Column 1):

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

我希望在移动设备上执行以下列顺序:

I want the following column order on a mobile:

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

以下是我创建的示例: http://jsbin.com/folekajera/1/edit?html，css，output

Here is an example I have created: http://jsbin.com/folekajera/1/edit?html,css,output

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

The problem with the example, is in the desktop view there is a gap between Column 1 and Column 3.

如何消除这一差距?

推荐答案

在桌面视图中出现空白的原因是Bootstrap的网格每行有12列.因此，前两个div占用了整行的宽度.第三列实际上在其自己的行中. Nitin的答案具有处理移动版式的正确方法.

The reason you have the gap in the desktop view is that Bootstrap's grid has 12 columns / row. So the first two div's use up a full row's width. The third column is effectively in it's own row. Nitin's answer has the correct way to handle the mobile layout.

因此，下面是您实际拥有的有效html.

Therefore, the effective html that you actually have is below.

编辑-在您发表评论后，我重新考虑了我的答案.有一种方法可以做到.我已经从我的第一个答案修改了html.关键项是下面的向右拉"类.有关详细信息，请参见列排序.

Edit - After your comment, I re-thought my answer. There is a way to do it. I've revised the html from my first answer. The key item is the "pull-right" class below. For details see Column ordering.

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

我已经在 http://jsbin.com/上更新了您的jsbin文件rinejayojo/1/edit?html，css，输出

这篇关于Twitter Bootstrap列位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！