Bootstrap列的垂直間距遇到堆疊問題如何解決

這篇文章主要介紹“Bootstrap列的垂直間距遇到堆疊問題如何解決”，在日常操作中，相信很多人在Bootstrap列的垂直間距遇到堆疊問題如何解決問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Bootstrap列的垂直間距遇到堆疊問題如何解決”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

　　<divclass="row">

　　<divclass="col-md-4"></div>

　　<divclass="col-md-4"></div>

　　<divclass="col-md-4"></div>

　　</div>

　　如果平板電腦或手機查看了該布局，則會堆疊所有列，但每列可能會直接觸及上一列。

　　一個簡單的解決方案是為每列添加一個底部邊距：

　　[class*="col-"]{

　　margin-bottom:15px;

　　}

　　這適用于某些情況，但在不需要時會增加額外的，不必要的余量。

　　解決的方法

　　為了解決這個問題，我們可以創建一個新的css類，它在堆積時將頂部邊距應用于列：

　　.row.row-grid[class*="col-"]+[class*="col-"]{

　　margin-top:15px;}

　　@media(min-width:1200px){

　　.row.row-grid[class*="col-lg-"]+[class*="col-lg-"]{

　　margin-top:0;

　　}

　　}

　　@media(min-width:992px){

　　.row.row-grid[class*="col-md-"]+[class*="col-md-"]{

　　margin-top:0;

　　}

　　}

　　@media(min-width:768px){

　　.row.row-grid[class*="col-sm-"]+[class*="col-sm-"]{

　　margin-top:0;

　　}

　　}

　　row-grid類將頂部邊距應用到具有前一列的列，媒體查詢然后在不需要的時候刪除頂部邊距。

　　在相關的說明中，如果要在行之間添加垂直間距，則將此行添加到CSS：

　　.row-grid+.row-grid{

　　margin-top:15px;

　　}

　　用法

　　只需將row-grid類添加到要啟用垂直列間距的行中即可。

　　<divclass="rowrow-grid">

　　<divclass="col-md-4"></div>

　　<divclass="col-md-4"></div>

　　<divclass="col-md-4"></div>

　　</div>

到此，關于“Bootstrap列的垂直間距遇到堆疊問題如何解決”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！