Question

我正在尝试将屏幕分隔为两个cols，一个宽度为9，另一个为3.在右列我需要一个容器来容纳行，但似乎它不想留在它的col和它射向右边。

如果我拿出容器，那个col中的所有按钮和东西都会变成垂直的，我怎么能防止它像那样拍摄并保持按钮的结构是水平的呢？

这是一个小例子：

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在同一级别上有更多行。

Answer 1

问题是您已将container嵌套到第一个col-md-3 div中。容器具有设置的宽度，并且只应用于包装行。因此层次结构应该是container > row > col > row > col > row > col ...

Answer 2

这是你在找什么？

<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

Bootstrap容器在屏幕上运行

2 个答案: