Bootstrap行不能适合所有十二列

Question

我试图了解bootstrap如何布局div以及为什么我的布局不会像我预期的那样呈现。

我正在尝试使用boostrap的网格系统布局两个宽度为5列的div（带粉红色背景），div用宽度为2列（黑色线条）分隔它们。

当最外面的div收缩超过一定量时，内部div不再连续地适合，如下所示。这不是由于屏幕尺寸超过其中一个截止（即从中到小）。

为什么会这样？是不是应该确保div的比例与列宽成比例缩小？

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-12">
  <div class="row">
    <div class="col-sm-12 text-center filtersectionheader">
      Course Level
    </div>
  </div>
  <div class="row">
    <!--Left div-->
    <div class="col-sm-5" id="randompink">
      <div class="row">
        <div class="checkbox center-inner">
          <label>
            <input type="checkbox"> <small id="levelcheckboxtext">Minimum</small>
          </label>
        </div>
      </div>
      <div class="row">
        <div class="dropdown center-inner">
          <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">2000
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li><a href="#">HTML</a>
            </li>
            <li><a href="#">CSS</a>
            </li>
            <li><a href="#">JavaScript</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- End of Left div-->
    <!--Small Black Line-->
    <div class="col-sm-2 top45" id="shorthline"></div>
    <!--End of Small Black line-->
    <!--Right div-->
    <div class="col-sm-5" id="randompink">
      <div class="row">
        <div class="checkbox center-inner">
          <label>
            <input type="checkbox"><small id="levelcheckboxtext">Maximum</small>
          </label>
        </div>
      </div>
      <div class="row">
        <div class="dropdown center-inner">
          <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">2000
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li><a href="#">HTML</a>
            </li>
            <li><a href="#">CSS</a>
            </li>
            <li><a href="#">JavaScript</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!--End of Right Div-->
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;