BootStrap柵格之間留空隙的解決方法

更新時(shí)間：2021年08月30日 10:12:01 作者：WenTaoTao

BootStrap柵格系統(tǒng)可以把我們的container容器劃分為若干等分，如果想要每個(gè)部分之間留出一定的空隙，那么應(yīng)該怎么解決，本文就來介紹一下

【看個(gè)例子】：

css樣式：

.row div {
 
height: 100px;
 
}

html代碼：

<div class="container">
<!-- 行元素 -->
<div class="row">
<!-- 列元素 col-xs-數(shù)值 col-sm-數(shù)值 col-md-數(shù)值 col-lg-數(shù)值 -->
<div class="col-lg-5"style="background-color: wheat;"></div>
<div class="col-lg-4"style="background-color: pink;"></div>
<div class="col-lg-3"style="background-color: black;"></div>
</div>
</div>

【原效果如下】：

現(xiàn)在我們想讓這三個(gè)部分之間相隔一段距離（10px）達(dá)到產(chǎn)生空隙的效果,但不能改變?cè)瓉淼牟季?，這里我們給它增加一個(gè)margin值：

css樣式改為：

.row div {			
height: 100px;
margin-right:10px;
 
}

【添加margin值后的效果】：

觀察發(fā)現(xiàn)，有一個(gè)部分被擠了下來，也就是說這一波操作改變了原來的柵格布局。

【原因如下】：

我們?cè)趧澐謻鸥駮r(shí)，劃分的每一部分都是占滿的，擠在一起的，要使每一列之間產(chǎn)一個(gè)空白空隙，因此你給它們加一個(gè)margin值（而本身每一部分柵格的大小不變），那么每一部分就會(huì)移動(dòng)，因此必定會(huì)超出父級(jí)container容器的寬度（12份）。

通過上述的操作及解釋，我們知道是不能通過設(shè)置margin值來使得柵格系統(tǒng)達(dá)到空出空隙的效果，那我們?cè)撊绾谓鉀Q呢？

【解決方法】：

我們可以給每個(gè)小列設(shè)置一個(gè)padding-right值，小列里面再放一個(gè)盒子，通過設(shè)置它的寬度width：100%（同父級(jí)嘛）即可！

css樣式：

.row div {
padding-left: 0px; // 去掉默認(rèn)的左padding
padding-right: 10px;
height: 100px;
}
 
.hezi {
width: 100%;
background-color: green;
}

html代碼：

<div class="container">
<!-- 行元素 -->
<div class="row">
<!-- 第一部分 -->
<div class="col-md-5"style="background-color: ;">
<div class="hezi"></div>
</div>
<!-- 第二部分 -->
<div class="col-md-4"style="background-color: ;">
<div class="hezi"></div>
</div>
<!-- 第三部分 -->
<div class="col-md-3"style="background-color: ;">
<div class="hezi"></div>
</div>
 
</div>
</div>

注：BootStrap的柵格系統(tǒng)對(duì)于響應(yīng)式的網(wǎng)頁開發(fā)非常方便，在使用柵格系統(tǒng)的時(shí)候可以非常方便的時(shí)候row和col--來控制布局。但是col--默認(rèn)會(huì)帶15像素的左右padding,這個(gè)會(huì)比較困擾。解決方案可以在內(nèi)部標(biāo)簽的class上添加row，將左右padding設(shè)為0即可，這樣會(huì)去掉表格的默認(rèn)padding。

最終效果和解析如下：