2017-06-20 53 views
1

在他們放棄使用pushpull類來更改列排序(http://getbootstrap.com/css/#grid-column-ordering)以下示例中的引導3文檔:實際使用情況下,自舉列排序(推,拉)

<div class="row"> 
    <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> 
    <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> 
</div> 

我明白這是如何但爲什麼你不只是寫下你希望它們出現在你的HTML中的順序,像這樣?

<div class="row"> 
    <div class="col-md-3"> ... </div> 
    <div class="col-md-9"> ... </div> 
</div> 

我不能看到他們給出的例子任何可能的使用情況,因爲無論是爲了col-md-3, col-md-9,或col-md-9, col-md-3你仍然不會獲得任何設備上的任何或多或少的寬度 - 它們仍然合計爲12.因此,爲什麼不按照正確的順序在HTML中定義呢?

我明白這些類是如何工作的。但我不明白他們的用例可能是什麼,因爲他們似乎沒有做任何你無法做到的事情,而是按照你想要的順序定義事物。本質上,你無法在給定的設備上獲得更多或更少的視口寬度,那麼你會想要做這樣的事情?

回答

2

列排序類允許我們根據不同的瀏覽器大小更改網格系統的順序。這意味着在大屏幕上,您可以擁有與手機屏幕不同的網格。

您可以檢查此例如, https://scotch.io/tutorials/reorder-css-columns-using-bootstrap

+0

您發佈的鏈接非常有用,但我仍然不完全明白爲什麼要使用它。如果「B」比「A」更重要(內容明智),那麼當然你仍然可以將它定義爲「B,A,C」。這永遠不會解決的是給你更多*寬*(因爲這是不可能的),所以我不明白爲什麼以這種方式呈現列是有利的。這將有助於看到一個網站,其內容*訂單以一種可感知的方式改變用戶的方式。 – Andy

+0

如果優先級隨屏幕大小而變化,該怎麼辦?如果我希望在大屏幕中按A,B,C排序的項目,並且項目B在移動設備中擁有更多優先級,並且我想在手機中使用B,A,C,那又如何? 那時候,bootstrap pull/push是非常有用的,我想。 –

0

,爲什麼你會不只是寫在你希望它們 出現在你的HTML

它的訂單,因爲當我們寫標記我們也應該考慮它的語義。

例如,您有一個頁面的左側有一個側邊欄,右側有一個文章。在您的標記層次結構中,文章應該位於側邊欄之前,因爲文章是主要頁面內容。

但是如果你float他們left,文章將在左側,側邊欄將在右側,這是你想達到的相反。所以要解決這個問題,你將使用pushpull類,你明白了。

這只是一個例子。當然,其他選項可用於實現相同的結果,例如float他們right,或者在文章之前放置邊欄標記,但用<aside>元素包裹它。