Bootstrap layout - 我們是否應該始終使用XS col類

我正在閱讀有關bootstrap 12網格列布局的內容。Bootstrap layout - 我們是否應該始終使用XS col類

作家用.col-sm-8類&上small, medium & large設備所述的DOM元素將採取8列空間但XS設備上的DOM元素將採取整個寬度見下圖像

在他用.col-xs-4類另一個例子和所述這將在XS, SM, M & LG設備上佔用4列的寬度。

這是否意味着我們應該始終使用xs*類，而不考慮設備，因爲它可以在較大的設備上自動調整？

總是使用xs類有什麼優點/缺點？

2015-12-13 SharpCoder

引導的設計考慮了移動先行的設計，這就是爲什麼XS列將是默認選擇。在這一行中：

<div class="col-xs-4"></div> 
<div class="col-xs-4"></div> 
<div class="col-xs-4"></div>

我們將在任何屏幕尺寸上有3個等寬列。較大的斷點是不相關的，因爲我們已經處於默認佈局。

不過，此行中：

<div class="col-md-4"></div> 
<div class="col-md-4"></div> 
<div class="col-md-4"></div>

你會看到，有上中/大屏幕3列和1列（堆積）在小型和XSMALL屏幕。

如果您希望它以不同的屏幕尺寸「打破」，您可以使用sm，m和l列。如果你永遠不需要它「休息」，那麼一直使用xs是很好的。

來源

2015-12-13 03:25:03

我明白特定的風格如何適用於更大或更小的設備這部分是明確的。你在這裏建議使用'xs'風格在所有情況下都能正常工作。 – SharpCoder

@SharpCoder是和否。如果你不想要一個響應式佈局（在移動設備上進行設計，它永遠不會改變），那麼你可以做所有的XS，這很好。但那種消除了使用Bootstrap的重要性。如果你希望它在不同尺寸的屏幕上看起來不同，你最終會使用不同大小的列的混合。 –

如果您嘗試定位不同的設備，則不應該只使用一個類，例如，假設您有一個廚房，並且您想在桌面上顯示4張圖片，而在電話設備上只顯示4張圖片。

下面是一個例子給你一個想法。

<div class="container"> 
    <div class="row"> 
    <figure class="col-xs-12 col-sm-6 col-md-4"> 
     <img .../> 
    </figure> 
    <figure class="col-xs-12 col-sm-6 col-md-4"> 
     <img .../> 
    </figure> 
    <figure class="col-xs-12 col-sm-6 col-md-4"> 
     <img .../> 
    </figure> 
    <figure class="col-xs-12 col-sm-6 col-md-4"> 
     <img .../> 
    </figure> 
    </div> 
</div>

來源

2017-06-29 22:03:11 EVrpg

謝謝，但這會顯示我認爲在桌面上的3個圖片。 – Scarass

Bootstrap layout - 我們是否應該始終使用XS col類

回答

相關問題