基於列的引導條件查詢

我使用引導程序3.x創建響應式網站。當屏幕尺寸爲col-xs-12時，我想設置-20px的左邊距，當尺寸爲col-md-3，col-sm-4和col-lg-2時，我需要一個左邊距0px。但是，似乎無論屏幕大小如何，col-xs-12 margin-left：-20px總是被應用。我該如何調整以獲得所需的結果。我的HTML和CSS是如下的順序相同：基於列的引導條件查詢

CSS：

.control.col-xs-12{ 
    margin-left:-20px; 
} 

.control.col-sm-4,.control.col-md-3,.scontrol.col-lg-2{ 
    margin-left:0px;  
}

HTML：

<div class="control col-xs-12 col-lg-2 col-md-3 col-sm-4 col-lg-pull-10 col-md-pull-9 col-sm-pull-8 col-xs-pull-0 featcol"> 
    <img src="http://www.example.com/example.jpg"> 
</div>

來源

2014-09-01 user2694306

-20px的邊距將始終適用，因爲您已經編寫了樣式規則，並且它始終被添加到您的HTML中。當使用不同的「響應式」CSS時，您需要查看使用媒體查詢，因爲這需要考慮設備瀏覽器大小......如果使用媒體查詢，則可以更改覆蓋現有樣式聲明或定義新樣式聲明。我也不認爲你理解Bootstrap列是流體寬度（百分比），所以你不能要求「當頁面等於col-md-3時我想讓col-xs-12 ... 」。您需要使用瀏覽器寬度，當您希望保證金爲0 – Kinnectus 2014-09-01 10:12:49

啊啊，謝謝澄清，它似乎與媒體查詢。如果你把它作爲答案，我會接受它。 – user2694306 2014-09-01 10:32:03

雖然我還沒有提供解決方案，您所提交的代碼的理解問題將使您瞭解（並因此生成）解決方案...

因爲您在您的HTML中擁有col-xs-12類，所以它定義的樣式將始終應用 - 無論瀏覽器大小如何。

你需要做的是找到重寫它的樣式時，您的瀏覽器尺寸變化的一種方式 - 這就是媒體查詢進來

媒體查詢允許CSS瀏覽器的大小變化時的動態變化。

你用Bootstrap增加了一個問題（好吧，因爲它的性質，根本不是問題），它所具有的列都是流體寬度 - 即它們使用百分比寬度 - 所以你不能說你想要媒體查詢在Bootstrap元素處於所需配置時激活。媒體查詢只適用於瀏覽器大小，因此您的媒體查詢只能在瀏覽器達到您所需的大小時激活 - 才能生成您想要的佈局。

來源

2014-09-01 10:52:14 Kinnectus

基於列的引導條件查詢

回答

相關問題