1. 程式人生 > >關於col柵欄系統與div自適應瀏覽器視窗

關於col柵欄系統與div自適應瀏覽器視窗

首先是關於col柵欄系統,比較系統的用法和規則在官網有介紹,這裡說在專案開發中比較常見和容易忽略的問題。

1、col-lg、col-md、col-sm、col-xs四種:

col-lg一般用於大屏裝置,
(min-width:1200px);

col-md一般用於中屏裝置,
(min-width:992px);

col-sm一般用於小屏裝置,
(min-width:768px);

col-xs用於超小型裝置,
(max-width:768px);

在進行web專案開發時用到柵欄時一般會比較習慣的用md,在實際使用時在解析度比較小的螢幕或者在瀏覽器縮小時會出現"變形"的情況,所以在給div設定col時要注意,

儘量考慮多種情況,不能僅僅以自己的測試機器解析度為參考。對於一個div可以這樣設定

<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">

如果想控制格式一致則對應的修改列即可。

2、柵欄系統都會有內邊距和外邊距,在使用柵欄後沒有達到預期的位置控制,可以檢視下內外邊距,

比如兩個分別佔6列的div中間間隔比較大,可以嘗試

<div class="col-md-6" style="margin-right:-20px">

<div class="col-md-6" style="margin-left:-20px">

可以縮小兩div的距離。

關於div自適應瀏覽器視窗大小(或者不同螢幕解析度的要求),

<div style="width:200px;heigth:1000px">

<div style="width:10%;heigth:1000px">

對比這兩個div可以發現,下面的可以在解析度不同時自調整寬度大小,因為其寬度是用%而非畫素,而採用200px這樣的畫素控制的是不管解析度大小或者瀏覽器視窗大小均不會發生寬度改變的