如何將兩個容器並排放置在自舉中？

Question

我嘗試將兩個容器並排放置，但它們堆疊在一起。即使是容器流體類也沒有幫助。

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-lg-12"> 
      Container Left 
     </div> 
    </div> 
</div> 

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-lg-12"> 
      Container Right 
     </div> 
    </div> 
</div> 

Bootstrap有可能嗎？

Answer 1

Bootstrap使用12列網格，因此您的每個div都會佔用一排。你也將每一行放在一行中，並且行將始終堆疊。試試這個：

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-lg-6"> 
      Container Left 
     </div> 
     <div class="col-lg-6"> 
      Container Right 
     </div> 
    </div> 
</div> 

Answer 2

的事情是，container-fluid現在由containerhttp://www.bootply.com/bootstrap-3-migration-guide repaced但這不是這件事。 嘗試使.col-md-offset-*將*列移動到您的列的右側。查看此信息http://getbootstrap.com/css/#grid

Answer 3

通過將您的列包裝在父容器和彈性盒中，您可以將獨立的列彼此相鄰。這些列將自動具有相同的寬度。這是一個例子。

HTML

<div class="parent-container"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col"> 
       Container Left 
      </div> 
     </div> 
    </div> 

    <div class="container"> 
     <div class="row"> 
      <div class="col"> 
       Container Right 
      </div> 
     </div> 
    </div> 
</div> 

CSS

.parent-container { 
    display: flex; 
}