Twitter Bootstrap mobile only列

是否可以在Boostrap中製作'僅移動'列？即一行4在較小的屏幕上變成一行2（3 * span4s變成2 * span6？）。我知道你可以通過添加.hidden-phone來隱藏移動元素。Twitter Bootstrap mobile only列

Zurb基金會有phone-two等這樣做的類。 http://www.zurb.com/article/859/fancy-mobile-layouts-with-the-foundation-

我需要編寫自己的媒體查詢來做到這一點嗎？

來源

2013-03-25 timhc22

媒體查詢不會真正幫助你，因爲你在談論改變HTML而不是簡單地通過CSS改變HTML樣式。您可以使用上面提到的Bootstraps「隱藏」類來隱藏較大設備上的一些內容並將其顯示在較小的設備上，但這意味着這兩組內容將被下載並顯示或隱藏。 – 2013-03-25 13:11:48

事情是基礎有'電話二'，我想知道引導程序是否有類似的東西：http://www.zurb.com/article/859/fancy-mobile-layouts-with-the-foundation- – timhc22 2013-03-25 13:56:44

Bootstrap沒有內置的與您所詢問的類相同的內容。

這裏有一個想法，讓你開始，如果你想編寫自己的：http://jsfiddle.net/panchroma/g6PRS/

CSS

@media (max-width: 767px) { 
.row-fluid.phone-two .span3 { 
width: 48%; 
margin-left: 4%; 
float:left; 
} 
.row-fluid.phone-two > .span3:nth-child(odd){ 
margin-left: 0; 
} 
}

HTML

<div class="container"> 
<div class="row-fluid phone-two"> 
<div class="span3"> 
    span3 
</div> 
<div class="span3"> 
    span3 
</div> 
    <div class="span3"> 
    phone-two span3 
</div> 
    <div class="span3"> 
    span3 
</div> 
</div> 
</div>

希望這是足夠多的獲得你去！

來源

2013-03-25 15:43:36

謝謝你會給它一個去！ – timhc22 2013-03-27 15:11:31

快速更新引導程序3現在支持您想要在此處執行的操作。

e.g

<div class='row'> 
    <div class='col-xs-3 col-md-6'> 
    </div> 

    <div class='col-xs-3 col-md-6'> 
    </div> 

    <div class='col-xs-3 col-md-6'> 
    </div> 

    <div class='col-xs-3 col-md-6'> 
    </div> 
</div>

還沒有測試這一點，但應該工作。應在移動設備上顯示2列，在桌面上顯示4列。更多信息http://getbootstrap.com/css/#grid

來源

2013-12-11 08:59:34

Twitter Bootstrap mobile only列

回答

相關問題