Bootstrap div不堆疊

Question

所以我正在使用引導程序來實現網格類型的布局。

但是，當應用XS類（移動設備）時，我的兩個div不會堆疊。

我的第一個div是這樣設置的：

<div class="col-xs-12 col-md-3 pull-right" id="ad-container">
Content
</div>

我的第二個像這樣：

<main id="content" class="col-xs-12 col-md-9 content-area" role="main">
Content
</main>

當我以移動尺寸查看它時， <main>元素只是直接位於“廣告容器”的頂部。

pull-right是否會引起這種情況？

謝謝

Answer 1

pull-right似乎是問題所在。 為確保您的內容區域在大屏幕上位於左側，但在移動設備上位於廣告容器下方，請使用列順序

<div class="row">
  <div class="col-xs-12 col-md-3 col-md-push-9" id="ad-container">
  Content
  </div>
  <div id="content" class="col-xs-12 col-md-9 col-md-pull-3 content-area" role="main">
  Content
  </div>
</div>

在“ md”或更高版本的屏幕上， col-md-push-9將該列向右“推” 9，而col-md-pull-3將該列向左“推” 3。