ZURB基金會手機上的DIV訂購（推/拉）

涉及基礎的快速問題。如果我想讓div在桌面上2，然後在移動設備上1，那麼我將如何使用Zurb來實現這一點？ZURB基金會手機上的DIV訂購（推/拉）

<div class="row"> 
    <div class="three columns"> 
    </div> 
    <div class="nine columns"> 
    </div> 
</div>

非常感謝您的幫助！

來源

2013-02-27 thetwosents

這絕對可以做到。在你的代碼中，你應該根據你在移動設備上顯示它的方式來訂購div，例如2和1.爲了在大屏幕上正確顯示它，你可以覆蓋div的默認樣式。

出於測試目的，你可以嘗試：

<div class="row"> 
    <div class="nine columns" style="float:right;"> 
    </div> 
    <div class="three columns" style="float:left;"> 
    </div> 
</div>

雖然上述解決方案將工作，我建議不要使用內嵌樣式。我寧願使用自定義類和/或@media標籤來覆蓋。

使用這些代碼將是：

對於HTML：

<div class="row"> 
    <div class="nine columns pull-right"> 
    </div> 
    <div class="three columns pull-left"> 
    </div> 
</div>

對於CSS /樣式表：

@media only screen and (min-width: 768px) { 
    .pull-left {float: left !important;} 
    .pull-right {float: right !important;} 
}

來源

2013-03-01 00:35:07 Dheer

太棒了！我會盡快實施，看看我在坐着，但聽起來很合理。 – thetwosents 2013-03-01 15:11:15

不知道你能做到這一點嚴格的CSS，但用JavaScript你可以在適用的時候添加pull-x類。

理論：按照移動設備或小屏幕的順序放置列。然後在document.ready中，檢查show-for-small是否可見，如果不是，則顯示在更大的屏幕上，並且可以將推拉類應用於所選列。

僞代碼，假設你知道push/pull technique：

// do this if not on small screen 
if ($('.show-on-small').css('display') == 'none') { 
    // pull or push the columns as needed 
    $('.myColumnsToPull-two').addClass('pull-two'); 
} else { 
    // might be a good idea to revert above change 
}

來源

2013-03-01 12:23:57 Tapirboy

ZURB基金會手機上的DIV訂購（推/拉）

回答

相關問題