如何使用Bootstrap使用推拉類時保持容器內的內容？

Question

我想使用推拉類，他們似乎像我打算工作，但他們不留在容器內。我怎樣才能解決這個問題？

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-4 col-xs-push-4"> 
      <p style="color:black;">sidebar</p> 
     </div> 
     <div class="col-xs-8 col-xs-pull-8"> 
      <p style="color:black;">main content</p> 
     </div> 
    </div> 
</div> 

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-8"> 
      <p style="color:black;">main content</p> 
     </div> 
     <div class="col-xs-4"> 
      <p style="color:black;">sidebar</p> 
     </div> 
    </div> 
</div> 

http://www.bootply.com/wvbSlom5BU

Answer 1

你由4推動的寬度4的列，並通過8的寬度8的列需要由8推動的4米寬度的列，並將拉的列8個寬度由4

BOOTPLY

HTML：

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-4 col-xs-push-8"> 
      <p style="color:black;">sidebar</p> 
     </div> 
     <div class="col-xs-8 col-xs-pull-4"> 
      <p style="color:black;">main content</p> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-8"> 
      <p style="color:black;">main content</p> 
     </div> 
     <div class="col-xs-4"> 
      <p style="color:black;">sidebar</p> 
     </div> 
    </div> 
</div> 

有關這些類的信息，請參見documentation。

您也不需要多個容器div的行，只有一個。