如何製作自定義引導網格？

Question

我試圖使自定義引導電網這樣的，但結果並不好：

這是網格我想打：

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-sm-3 box-area"> 
     <p>text</p> 
    </div> 
    <div class="col-sm-9 slide-area"> 
    </div> 
    </div> 
</div> 

Answer 1

引導的電網系統是敏感的。基本上，這些網格在不同屏幕尺寸的設備上不斷變換。因此，如果您在桌面等大屏幕上工作，則必須處理屏幕較小的其他設備。

我將討論關於網格系統如何工作的基礎知識，但是我並沒有爲你想要達到的目標做出代碼。

重點斷點

是否涉及設備的屏幕大小媒體查詢。

• < 768px屏幕尺寸 - 超小設備（手機）。
• 768px屏幕尺寸 - 小型設備（平板電腦）。
• 992px屏幕尺寸 - 中等設備（桌面）
• 1200px屏幕尺寸 - 大型設備（大型桌面）。

電話是小於768px屏幕尺寸的，所以它是 視爲一個額外的小裝置...

類前綴

類前綴用於創建網格都指向關鍵斷點。

• col-xs - 特小號（XS - < 768px）
• col-sm - 小（SM - 768px）
• col-md - 中等（MD - 992px）
• col-lg - 大（LG - 1200像素）

您可以使用網格系統創建總共12列。該列本身可以根據您希望顯示的屏幕大小與類別前綴分開來劃分。

例如 - 您想在 中型設備屏幕上顯示分爲3列的內容。在這種情況下，您將使用 前綴col-md，並在您的網頁上將它們分成3份， 由於您將整個12列分成3份，因此必須將4加到類前綴中部分。那麼你的班級將是col-md-4。

你可以在Bootstrap的docs上用一些例子詳細閱讀它，所以你可以完全理解它的用法。