類標籤和多視圖端口的Bootstrap最佳實踐

剛進入Bootstrap 3並想知道哪些最佳實踐是關於多個視口的類標記。例如，只是爲了彌補我的navbar-brand看起來這似乎只是凌亂以下（但我想這是關於引導投訴之一）：類標籤和多視圖端口的Bootstrap最佳實踐

<div class="col-xl-11 col-xl-offset-1 col-lg-11 col-lg-offset-1 col-md-11 col-md-offset-1 col-sm-11 col-sm-offset-1 col-xs-11 col-xs-offset-1">

好像有一個更好，更簡潔的方式來寫這將保留每個視口大小的動態元素。

2016-07-09 sockpuppet

答案很簡單： - 想想移動第一

<div class="col-xl-11 col-xl-offset-1 col-lg-11 col-lg-offset-1 col-md-11 col-md-offset-1 col-sm-11 col-sm-offset-1 col-xs-11 col-xs-offset-1">

相同

<div class="col-xs-11 col-xs-offset-1">

因此，首先將規則應用於從-xs較小的尺寸開始然後向-lg移動（或XL在你的情況）

例

比方說，你想在桌面-md和半角上-lg上移動-xs，3/4的全寬元素。你應該拿出是

<div class="col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">

請注意，你不定義col-xs-12，因爲它將默認爲你進行設置。在這種情況下，-sm也將col-sm-12設置默認

2016-07-09 16:00:59

你不必爲設置大小爲每個屏幕尺寸的，僅有1手機和1臺桌面，如果你真的想，如果這是你想要的，使用2種不同尺寸的桌面。我可以給你的另一個提示是你container-fluid 所以它會自動填充到父級大小

2016-07-09 16:05:03 Daniel

回答