bootstrap3 使用col栅格实现响应式布局尺寸问题

设备分类

• xs (phones)：超小设备手机（<768px）
• sm (tablets)：小型设备平板电脑（≥768px）
• md (desktops)：中型设备台式电脑（≥992px）
• lg (larger desktops)：大型设备台式电脑（≥1200px）

响应式布局

• 在适配多端的时候，需要从小到大去写，例如：“.col-xs-12 .col-sm-6 .col-lg-8”
  代码示例：

<!-- Logo和Slogan -->
    <div class="header">
        <div class="container" style="height: 100px; border: solid 2px red">
            <div class="row">
                <div class="col-sm-5 col-12"><img src="/img/logo.jpg" width="230px" /></div>
                <div class="col-sm-7 col-12" style="text-align: right; border: solid 2px blue;">just for fun.</div>
            </div>
        </div>
    </div>

"col-sm-5 col-12"代表大于等于sm的设备按照5:7分列排布，其余情况使用col-12排满，这里的其余情况也就是小于sm的设备。

• 效果如下：
  大于等于sm
  

小于sm

• 如果需要所有的设备一致，只需要规定最小的其它的也会生效

    <!-- Logo和Slogan -->
    <div class="header">
        <div class="container" style="border: solid 2px red">
            <div class="row">
                <div class="col-xs-5" style="padding-top: 10px;"><img src="/img/logo.jpg" width="230px" /></div>
                <div class="col-xs-7 hidden-xs" style="text-align: right; border: solid 2px blue; padding-top: 20px;">
                    <h2>just for fun.</h2>
                </div>
                <div class="col-xs-7" style="text-align: right; border: solid 2px blue; padding-top: 20px;">
                    <h2>blogs</h2>
                </div>
            </div>
        </div>
    </div>