---- ----编辑

Question

我有一些html内容，我希望在内容相同的情况下将two columns排列在彼此之下。

但在移动设备上，我希望将内容叠加为一列。

如何使用bootstrap css实现此目的？我尝试了如下，但没有用：

            <div class="row">
                <div class="col-lg-2">
                     //the content to distribute
                </div>
            </div>

此外，我不能使用css columns，因为我必须支持IE8 + 9。

Answer 1

<div class="row">
  <div class="col-xs-12 col-sm-6">
     //first half
  </div>
  <div class="col-xs-12 col-sm-6">
     //second half
  </div>
</div>

使用手机（或小屏幕）时，col-xs-12告诉列全屏显示。

当使用任何更大尺寸的设备时，col-sm-6告诉列为行的一半大小。

我建议阅读bootstrap docs

---- ----编辑

如果你想使用列css-也用于ie8,9你可以检查这个js插件： http://welcome.totheinter.net/columnizer-jquery-plugin/

Answer 2

嗨，你可以使用这个我想请看看

＆＃13;

.tt{
    border : 2px solid grey;
}

＆＃13;

<div class="container">
    <div class="row-fluid">
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 tt">
            first half
        </div>
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 tt">
            second half
        </div>
    </div>
</div>

＆＃13;

这是工作演示代码..

<强> Demo code

如何使用bootstrap css将两列中的内容对齐？

2 个答案:

---- ----编辑