1.柵格系統
Bootstrap是基於移動優先的原則開發的，使用了一系列的媒體查詢（media queries）方法，為我們的布局和界面創建自適應的的分界點。這些分界點主要是基於視口寬度的最小值，並且當窗口視圖改變的時候允許元素縮放。
(分界點大小：576px、768px、992px、1200px)
Bootstrap包含了一個強大的移動優先的網格系統，它是基於一個12列的布局、有5種響應尺寸(對應不同的屏幕)。Bootstrap4是完全基於flexbox流式布局構建的，完全支持響應式標准。
2.響應式的class選擇器
Bootstrap的柵格系統包括五種寬帶預定義，用於構建復雜的響應布局，你可以根據需要定義在特小.col、小.col-sm-*、中.col-md-*、大.col-lg-*、特大.col-xl-*五種屏幕(設備)下的樣式。
每個標簽都是定義了在當前斷點之下的排列樣式，一旦小於這個斷點那么樣式就不起作用了，變成了各獨自占一行。
類似於sm,md,lg,xl等都是斷點，只有當屏幕尺寸大於斷點的對應的大小，這樣的的class樣式才會生效。比如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style> #box_row div { line-height: 100px; text-align: center } </style>
</head>
<body>
<div class="container">
<div id="box_row" class="row" style="height: 100px">
<div class="col-xl-4" style="background: #27ff86">
222
</div>
<div class="col-xl-4 " style="background: #8879ff">
222
</div>
<div class="col-xl-4" style="background: #ffc535">
other
</div>
</div>
</div>
</body>
</html>
這里設置了邊框，這里其實設置的在超大屏幕下的樣式，即當前屏幕的尺寸寬度大於1140px時這個樣式才生效，如下：
但是當屏幕的尺寸變小之后，比如縮小到1140px之后，就會自動成為每列一行、水平堆砌。
比如把瀏覽器窗口的寬度調小到1140px以下，此時顯示的效果如下：
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-r5Yt3rtr-1597584075252)(https://i.loli.net/2020/08/15/WQK15GClPzsJXEu.png)]
會自適應的進行布局，這是根據當前屏幕尺寸進行自動的調整的也就是說，當屏幕尺寸小於端點值xl時，此時每列就會自動的占一行，水平堆砌。
3.混合布局
<div class="container">
<div id="box_row" class="row" style="height: 100px">
<div class="col-xl-4 col-sm-3" style="background: #27ff86">
222
</div>
<div class="col-xl-4 col-sm-3" style="background: #8879ff">
222
</div>
<div class="col-xl-4 col-sm-3" style="background: #ffc535">
other
</div>
</div>
</div>
這樣就設置了兩個斷點，在超大屏幕下每塊占4列，在大屏幕和小屏幕之間是占3列，以下是效果展示圖：
-
當屏幕尺寸大於1140px時，
col-xl-4生效： -
當屏幕尺寸小於1140px，大於576px時：
可以看到此時的布局調整到了
col-sm-3下的自適應樣式，即每個塊占3列 -
混合布局情況下可以對多種設備進行布局調整。
搬運自我的個人博客boostrap柵格系統自適應的布局