bootstrap柵格系統的container和row一些關系


container有個15px的padding,而我們設定的每個col也都有15px的padding,如果兩者直接配合,那么就會產生30px的間距,導致內容和瀏覽器邊框的距離較大,所以用row將所有的col包裹,row會有一個-15px的margin,可以抵消掉一個container或col產生的15px的padding值。

 

另,官網中的關於gutter的條目中的示例:(https://getbootstrap.com/docs/4.3/layout/grid/)

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

在這里把理解記錄一下,以防忘記。

意思是col增加px-lg-5的類,會使col的padding值增大,所以row需要通過增加mx-lg-n5的類去減少同樣多的padding去抵消增加的部分,為了防止意外的溢出,container也需要增加px-lg-5的類以增加同樣多的padding(這里沒明白啥意思,照着做就好了)。上面的類名,px-lg-5中p指padding?,mx-lg-n5中m指margin?,n應該是negative。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM