在桌面上自定义引导列排列

【问题标题】：Customize bootstrap column arrangement on desktop在桌面上自定义引导列排列
【发布时间】：2014-05-10 04:22:53
【问题描述】：

使用 Bootstrap v3.1.1

当浏览器窗口

[左]

[主要]

[右]

我怎样才能让他们这样安排呢？

[主要]

[左][右]

*主居中，在其下方左右居中

<div class="container">
    <div class="row clearfix">
        <div class="col-md-2 column left" style="background: rgb(108,108,240)></div>
        <div class="col-md-8 column main" style="background: rgb(108,108,240)"></div>
        <div class="col-md-2 column right" style="background: rgb(108,108,240)></div>    
    </div>
</div>

【问题讨论】：

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

【解决方案1】：

您可以使用col-sm-* 或col-xs-* 为较小的设备定义列宽

<div class="container">
    <div class="row clearfix">
        <div class="col-md-2 col-sm-12 column left" style="background: rgb(108,108,240)"></div>
        <div class="col-md-8 col-sm-6 column main" style="background: rgb(108,108,240)"></div>
        <div class="col-md-2 col-sm-6 column right" style="background: rgb(108,108,240)"></div>    
    </div>
</div>

但最大的列（主）需要在 div 列表中排在第一位

JSFiddle

【讨论】：