第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定

Bootstrap柵格系統(tǒng)遇到的坑

最近刚上手玩Bootstrap的栅格系统,

一行内,明明4个<div>都是col-md-3,却排不了一行,也没有额外的css去影响它们。

具体代码:

<row>
    <div class="col-sm-4 col-sm-offset-2 col-md-3">asd</div>
    <div class="col-sm-5 col-sm-offset-1 col-md-3">asd</div>
    <div class="col-sm-4 col-sm-offset-2 col-md-3">asd</div>
    <div class="col-sm-5 col-sm-offset-1 col-md-3">asd</div>
<row>


后来把上面4个col-md-3都设置成col-md-1,发现有点猫腻

我把上面的标签内容asd 填充并加上背景色,以便观察

https://img1.sycdn.imooc.com//5b4d61eb0001e5a112000200.jpg

明明没有设置col-md-offset-*,却有间隙。

很明显就是延用了col-sm-offset-*,所以把代码改成下面就解决了

<row>
    <div class="col-sm-4 col-sm-offset-2 col-md-3 col-md-offset-0">asd</div>
    <div class="col-sm-5 col-sm-offset-1 col-md-3 col-md-offset-0">asd</div>
    <div class="col-sm-4 col-sm-offset-2 col-md-3 col-md-offset-0">asd</div>
    <div class="col-sm-5 col-sm-offset-1 col-md-3 col-md-offset-0">asd</div>
<row>

原来bootstrap的栅格系统,无论是col-**-*还是col-**-offset-*

如果大的一级没有设置,就会延用下一级。

比如我上面的代码只设置到col-md-3,col-md-offset-0。没有设置col-lg-的,但是当窗口大于1200px时,会延用它的下一级,也就是col-md-的。

所以说即使我上面没填col-lg-的,它也会拥有(col-lg-3,col-lg-offset-0)

點擊查看更多內(nèi)容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優(yōu)質文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優(yōu)惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號

舉報

0/150
提交
取消