如何使Bootstrap行扩展它们所在的DIV？

Question

我想使用Bootstrap制作一个包含四行复选框的面板。

在下面的代码中，adminPanel周围有一个边框，但Bootstrap内容不会扩展div：

如果我有普通的HTML，它可以正常工作。

如何获取Bootstrap行来扩展它们所在的DIV？

＆＃13;

＆＃13;

.adminPanel {
  border: 2px solid red;
}

＆＃13;

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-12">
  <div class="adminPanel">
    <div class="col-sm-3">
      <div class="checkbox">
        <label><input type="checkbox" value=""/>Testing</label>
      </div>	
      <div class="checkbox">
        <label><input type="checkbox" value=""/>Testing</label>
      </div>	
      <div class="checkbox">
        <label><input type="checkbox" value=""/>Testing</label>
      </div>	
    </div>
    <div class="col-sm-3">
      <div class="checkbox">
        <label><input type="checkbox" value=""/>Testing</label>
      </div>	
      <div class="checkbox">
        <label><input type="checkbox" value=""/>Testing</label>
      </div>	
      <div class="checkbox">
        <label><input type="checkbox" value=""/>Testing</label>
      </div>	
    </div>
    <div class="col-sm-3">
      <div class="checkbox">
        <label><input type="checkbox" value=""/>Testing</label>
      </div>	
      <div class="checkbox">
        <label><input type="checkbox" value=""/>Testing</label>
      </div>	
      <div class="checkbox">
        <label><input type="checkbox" value=""/>Testing</label>
      </div>	
    </div>
    <div class="col-sm-3">
      <div class="checkbox">
        <label><input type="checkbox" value=""/>Testing</label>
      </div>	
      <div class="checkbox">
        <label><input type="checkbox" value=""/>Testing</label>
      </div>	
      <div class="checkbox">
        <label><input type="checkbox" value=""/>Testing</label>
      </div>	
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试添加

display: inline-block;

到CSS文件中的.adminPanel类。

Answer 2

我已将.col-sm-12转换为.row并用.container包围它，使其使用正确的Bootstrap网格结构。始终具有外部.container并将列的用法与行组合使用。嵌套这些将导致类似.container > .row > .col-... > .row > .col-...的结构。

然而，这不是问题。所有列都浮动，不会占用文档中的空间。这使得.adminPanel的高度为零。向.clearfix添加.adminPanel，或者在我完成之后将.adminPanel移动到内置了clearfix的.row类。

＆＃13;

＆＃13;

.adminPanel {
  border: 2px solid red;
}

＆＃13;

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row adminPanel">
    <div class="col-sm-3">
      <div class="checkbox">
        <label>
          <input type="checkbox" value="" />Testing</label>
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox" value="" />Testing</label>
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox" value="" />Testing</label>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="checkbox">
        <label>
          <input type="checkbox" value="" />Testing</label>
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox" value="" />Testing</label>
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox" value="" />Testing</label>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="checkbox">
        <label>
          <input type="checkbox" value="" />Testing</label>
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox" value="" />Testing</label>
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox" value="" />Testing</label>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="checkbox">
        <label>
          <input type="checkbox" value="" />Testing</label>
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox" value="" />Testing</label>
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox" value="" />Testing</label>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;