Bootstrap容器跑出屏幕

我試圖讓屏幕分成兩列，一列寬9和另一列3.在右列我需要一個容器來容納行，但它似乎沒有'不想留在其中，它射向右邊。Bootstrap容器跑出屏幕

如果我拿出容器，那麼這個欄中的所有按鈕和東西都變成垂直的，我怎樣才能防止它像這樣射擊並保持按鈕的結構是水平的？

這裏有一個小例子：

http://www.bootply.com/JfUvsLOmpj

<div class="row"> 
    <div class="col-md-9" id="boardArea"> 
    <table id="board"></table> 
    </div> 
    <div class="col-md-3"> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-md-3"> 
      <div class="row" id="firstRow"> 
      <div class="col-md-12"> 
       <div id="controlPanel"> 
       <div class="col-md-12 text-center"> 
        <button href="#" class="btn btn-default btn-sm" id="filled">Mark</button> 
        <button href="#" class="btn btn-default btn-sm" id="empty">Clear</button> 
        <button href="#" class="btn btn-default btn-sm" id="unknown">Unknown</button> 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div>

PS：有在同一水平firstRow多行。

來源

2016-10-19 shinzou

問題是您已將container嵌套到第一個col-md-3 div中。容器有一個設定的寬度，只能用來包裹你的行。所以層次結構應該去container > row > col > row > col > row > col ...

來源

2016-10-19 23:21:53 jpopesculian

如果我取出容器在該列中的所有元素變成垂直，這樣可以做些什麼來防止？ – shinzou

@kuhaku讓父母變寬嗎？（即大於'.col-md-3'） – ochi

好吧，不要緊，我有太多的行和列，我把它改成'row> col> row ......'就像你建議的那樣，現在沒關係。 – shinzou

這是你在找什麼？

<div class="container-fluid"> 
<div class="row"> 
<div class="col-md-9"> 
    <table class="table"> 
    <tr><th>Header</th><th>Header</th></tr> 
    <tr><td>Data</td><td>Data</td></tr> 
    <tr><td>Data</td><td>Data</td></tr> 
    </table> 
</div> 
<div class="col-md-3"> 

    <button class="btn btn-success">Submit</button> 
    <button class="btn btn-success">Submit</button> 
    <button class="btn btn-success">Submit</button> 
</div> 
</div> 
</div>

退房此筆：http://codepen.io/Hudson_Taylor11/pen/qaQVzd?editors=1100

來源

2016-10-19 23:29:26

Bootstrap容器跑出屏幕

回答

相關問題