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

最新推荐文章于 2024-01-03 18:00:15 发布

原创

最新推荐文章于 2024-01-03 18:00:15 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #前端 #html

设备分类

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的设备。