當景觀引導3時添加網格

我想知道是否有任何方式添加網格時，使用手機lanscape。即時通訊使用的引導V3當景觀引導3時添加網格

繼承人我的代碼

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
    <div class="card m-15"> 
    <div class="card-top"> 
     <img src="img/1.jpg"> 
    </div> 
    <div class="card-caption"> 
     <h6 class="text-center uppercase bold">chocolate chip cookies</h6> 
     <p>by <a href="#">lipsum</a> 
     </p> 
     <div class="tag"> 
     <a href="#">lipsum</a>,<a href="#"> lipsum</a> 
     </div> 
    </div> 
    </div> 
</div> 
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
    <div class="card m-15"> 
    <div class="card-top"> 
     <img src="img/1.jpg"> 
    </div> 
    <div class="card-caption"> 
     <h6 class="text-center uppercase bold">chocolate chip cookies</h6> 
     <p>by <a href="#">lipsum</a> 
     </p> 
     <div class="tag"> 
     <a href="#">lipsum</a>,<a href="#"> lipsum</a> 
     </div> 
    </div> 
    </div> 
</div>

的結果在媒體XS在potraint模式的罰款。但是在橫向模式下，它會佔用大空間。

當我只在橫向模式下使用時，是否可以從col-xs-12更改爲col-xs-6？

來源

2016-03-06 vicario

如果我明白你想要做的正確，我認爲最簡單的方法來實現這一點將通過使用媒體查詢。在CSS中使用媒體查詢可以檢測窗口寬度何時發生變化並相應地調整屬性。如果不使用JavaScript沒有辦法來添加或刪除類，所以我們不能改變COL-XS-12 COL-XS-6

第一個變化我會做的添加行類到您的div：

< DIV類= 「行COL-LG-3 COL-MD-3 COL-SM-6 COL-XS-12」>內容</DIV>

然後，我們將使用媒體查詢以查看屏幕寬度何時發生更改（這將位於外部CSS文件中）。

@media (min-width: 400px) { 
    .row { 
    width: 60%; 
    margin-left: 20%; 
    } 
}

這是說，當我們的窗口至少400像素寬，我們將給該行的div 60％的寬度，並給它一個利潤率左的20％，這樣的居中。

Here is an example I made

來源

2016-03-06 21:12:04 Jackbid

當景觀引導3時添加網格

回答

相關問題