如何在開發過程中在頁面上看到引導程序網格大小的大小？

Question

在開發一個網頁時，可以很方便地查看哪些尺寸類別集合處於活動狀態：xs，sm，md，lg。

我注意到有一些擴展顯示網格疊加，但不是大小。

有沒有辦法指出哪些尺寸設置是活動的？

Answer 1

引導網格系統具有4個類

1. XS爲移動（下面768px）
2. SM爲片劑（上面768和下面992）
3. MD爲臺式機（以上992和下面1200）
4. lg適用於較大桌面（1200以上）

所以，用這個值。您可以更改寬度並瞭解當前活動的課程。

Answer 2

如果您使用的是Chrome的開發工具，則不需要任何擴展。

1. 打開Chrome的開發者工具按F12
2. 調整窗口大小
3. 你會看到窗口的大小在右上角。
4. 在開發人員窗口中選擇Div，您想要檢查哪個類是活動的。
5. 再次調整窗口大小。
6. 您將看到活動的類名將在開發人員工具的「樣式」窗格中顯示。

Answer 3

有JavaScript的解決方案：

Responsive Bootstrap Toolkit

如果要檢測電流的大小與CSS設置，您可以創建一個像身體的CSS規則或任何其他元素：

@media only screen and (min-width: 1280px) { 
    .body-helper {background: green;} 
} 

@media only screen and (min-width: 992px) and (max-width: 1279px) { 
    .body-helper {background: pink;} 
} 

@media only screen and (min-width: 768px) and (max-width: 991px) { 
    .body-helper {background: maroon;} 
} 

@media only screen and (max-width: 767px) { 
    .body-helper {background: lightblue;} 
} 

請使用您的引導設置適當的斷點。所以你可以通過背景變化來確定當前的尺寸。

Answer 4

您可以通過開發人員工具（如Google Chrome）檢查屏幕大小或媒體查詢中斷點。您可以從Google Chromes開發人員工具中檢查「Test Responsive and Device-specific Viewports」。

Answer 5

你可以使用隱藏的列。所以你隱藏了其他屏幕尺寸的div。

實施例：

<div class="col-lg-3"> <div class="visible-lg hidden-xs hidden-sm hidden-md">col-lg</div> </div> 

瞭解詳情：Scotch.io - 響應公用事業