自舉網格與引導輪播搞砸了，引導輪播打擾網格系統

Question

這就是我想要做的。 我想引導傳送帶有col-sm-8。我想把一張表格顯示在col-sm-4中的頂級故事。 然後在那兩個下面。我想要有三個包含類別列表的col-sm-4。 我遇到的問題是旋轉木馬入侵col-sm-4。它應該在col-sm-8結束它的空間，但它會以任何方式到達那裏。另外我不知道如何在頂部有col-sm-8和col-sm-4。並在col-sm-4 col-sm-4 col-sm-4以下。我試過的東西是把div放在頂部。和下面一節的一個div。但這不起作用。因爲我是一個noob，我會很感激任何形式的建議或幫助。謝謝。

<div> 
<div class="col-sm-8"> 
<div class='carousel slide' id="myCarousel" style="width:1400px; margin:0 auto"> 

    <ol class="carousel-indicators"> 
     <li class="active" data-slide-to="0" data-target="#myCarousel"></li> 
<li class="active" data-slide-to="1" data-target="#myCarousel"></li> 
<li class="active" data-slide-to="2" data-target="#myCarousel"></li> 
    </ol> 


    <div class="carousel-inner"> 
     <div class="item active" id="slide1"> 
           <img src = "http://i.imgur.com/SQ691ZO.jpg" /> 

      <div class="carousel-caption"> 
       <h4>hello</h4> 
       <p>hi you</p> 
      </div> 
     </div> 

    <div class="item" id="slide2"> 
          <img src = "http://i.imgur.com/SQ691ZO.jpg" /> 

      <div class="carousel-caption"> 
       <h4>hello</h4> 
       <p>hi you</p> 
      </div> 
     </div> 

    <div class="item" id="slide3"> 
          <img src = "http://i.imgur.com/SQ691ZO.jpg" /> 

      <div class="carousel-caption"> 
       <h4>hello</h4> 
       <p>hi you</p> 
      </div> 
     </div> 
     </div> 

<a class="left carousel-control" data-slide="prev" href="#myCarousel"><span class="icon-prev"></span></a> 
<a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="icon-next"></span></a> 


</div> 
</div> 
<div class=col-sm-4> 
    hello you 
</div> 
</div> 

<div> 
<div class=col-sm-4> 
    category one 
</div> 
<div class=col-sm-4> 
    category two 
</div> 
<div class=col-sm-4> 
    category three 
</div> 

Answer 1

自舉電網系統

自舉電網具有一定的設置，你應該使用。首先創建一個container，這可以使用.container或流體（從左到右）.container-fluid固定。

在容器內部，您可以創建.row s，以在其中嵌套列。

一個適合您的需求基本設置可能是：

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-8">8 Columns</div> 
    <div class="col-xs-4">4 Columns</div> 
    </div> 
    <div class="row"> 
    <div class="col-xs-4">3 Columns</div> 
    <div class="col-xs-4">3 Columns</div> 
    <div class="col-xs-4">3 Columns </div> 
    </div> 
</div> 

JSFIDDLE DEMO

您可以在bootstrap grid introduction讀到它。

---

採用網格系統

如果你適應這對你的代碼可能是這樣的：

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-8"> 
     <div class='carousel slide' id="myCarousel"> 
     <!--slider content --> 
     </div> 
    </div> 
    <div class=col-sm-4> 
     hello you 
    </div> 
    </div> 
    <!--.row--> 

    <div class="row"> 
    <div class=col-sm-4> 
     category one 
    </div> 
    <div class=col-sm-4> 
     category two 
    </div> 
    <div class=col-sm-4> 
     category three 
    </div> 
    </div> 
</div> 
<!--.container--> 

JSFIDDLE DEMO 2

---

滑塊寬度

要修復滑塊過大，必須從其div中刪除style="width:1400px; margin:0 auto"。之後，它應該自動調整其大小。