BootStrap柵格之間留出空隙
BootStrap柵格系統可以把我們的container容器劃分為若干等分，如果想要每個部分之間留出一定的空隙，我們很可能首先想到的方法就是用margin外邊距來使它們分離從而產生空隙，這樣做真的的可以嗎？
【看個例子】：
css樣式：
.row div {
height: 100px;
}
html程式碼：
<div class="container">
<!-- 行元素 -->
<div class="row">
<!-- 列元素 col-xs-數值 col-sm-數值 col-md-數值 col-lg-數值 -->
<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>
【原效果如下】：
現在我們想讓這三個部分之間相隔一段距離（10px）達到產生空隙的效果,但不能改變原來的佈局，這裡我們給它增加一個margin值：
css樣式改為：
.row div {
height: 100px;
margin-right:10px;
}
【新增margin值後的效果】：
觀察發現，有一個部分被擠了下來，也就是說這一波操作改變了原來的柵格佈局。
【原因如下】：
我們在劃分柵格時，劃分的每一部分都是佔滿的，擠在一起的，要使每一列之間產一個空白空隙，因此你給它們加一個margin值（而本身每一部分柵格的大小不變），那麼每一部分就會移動，因此必定會超出父級container容器的寬度（12份）。
通過上述的操作及解釋，我們知道是不能通過設定margin值來使得柵格系統達到空出空隙的效果，那我們該如何解決呢？
【解決方法】：
我們可以給每個小列設定一個padding-right值，小列裡面再放一個盒子，通過設定它的寬度width：100%（同父級嘛）即可！
css樣式：
.row div {
padding-left: 0px; // 去掉預設的左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的柵格系統對於響應式的網頁開發非常方便，在使用柵格系統的時候可以非常方便的時候row和col--來控制佈局。但是col--
預設會帶15畫素的左右padding,這個會比較困擾。解決方案可以在內部標籤的class上新增row，將左右padding設為0即可，這樣會去掉表格的預設padding。
最終效果和解析如下：
總結
以上是我在學習Bootstrap時遇到的問題，個人認為還是蠻有趣以及重要的，於是結合視訊案例然後自己在另外做了詳細分析總結，加深理解。你我本不認識，茫茫人海中相遇便是一種緣分。最後，感謝看到這裡的你！願你韶華不負，青春無悔！
注: 由於自己最近剛剛步入JavaWeb前端階段學習，語言文字描述、技術等各方面都還不是很好，如果文章有任何錯誤和建議，請各位大佬盡情評論留言！如果這篇文章對你有些許幫助，希望可愛親切的您點個贊推薦一手，非常感謝啦
