如何像这样使用 Bootstrap3 创建具有 3 列的布局？答案

【问题标题】：How to create a layout with 3 columns with Bootstrap3 like this?如何像这样使用 Bootstrap3 创建具有 3 列的布局？
【发布时间】：2015-03-25 22:01:57
【问题描述】：

我有 3 列名为 Left、Main 和 Right，我希望它们像这样排列：

总经理：

Left(3)|Main(6)|Right(3)

SM：

Main(12)
Left(6)|Right(6)

XS：

Main(12)
Left(12)
Right(12)

这是我的代码：

<div id="main-content" class="col-xs-12 co-md-offset-3 col-md-6">
</div>
<div id="left-sidebar" class="col-xs-12 col-sm-6 col-md-3 col-md-offset-0 pull-left">
</div>
<div id="right-sidebar" class="col-xs-12 col-sm-6 col-md-3 col-md-offset-0">
</div>

但是，MD模式下Main列的布局不正确。那么正确的代码是什么？

（ps：如果可能，最好将Main div 放在文档顶部。）

谢谢。

【问题讨论】：

列应该在 .row 元素内，如果我没记错的话。
哦，是的，我已经用 row 类打开了外部 div，没关系。

标签： html css twitter-bootstrap-3 responsive-design

【解决方案1】：

你可以像这样使用pushpull..

    <div class="row">
        <div id="main-content" class="col-xs-12 col-md-push-3 col-md-6">main
        </div>
        <div id="left-sidebar" class="col-xs-12 col-sm-6 col-md-3 col-md-pull-6">left
        </div>
        <div id="right-sidebar" class="col-xs-12 col-sm-6 col-md-3">right
        </div>
    </div>

演示：http://codeply.com/go/rWmJU4aNds

【讨论】：

顺便说一下main-content的类应该是col-md-push-3而不是co-md-push-3。
实际上.. 推/拉标记是错误的。我已经更新了答案
除了main 中的col-md-push-3 应该是col-md-push-6，一切都很好。我已经测试过了。怎么了？