Bootstrap网格布局无法按预期工作

Question

我正在使用Bootstrap 3.3.5,我有两列:.col-md-9和.col-md-3.

但是,具有该类的那个.col-md-3以某种方式占据父行的全宽,而不是仅占用25%.

为什么会这样？

注意:在整页中运行代码段并调整浏览器窗口的大小,直到您看到此行为.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-9">
      <div>Element</div>
      <div>Element</div>
      <div>Element</div>
      <div>Element</div>
      <div>Element</div>
    </div>
    <div class="hidden-xs col-md-3">
      <ul class="list-group">
        <li class="list-group-item">
          <span class="badge">12</span>
          Matt Damon
        </li>
        <li class="list-group-item">
          <span class="badge">9</span>
          Brad Pitt
        </li>
        <li class="list-group-item">
          <span class="badge">4</span>
          George Clooney
        </li>
        <li class="list-group-item">
          <span class="badge">2</span>
          Angelina Jolie
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 1

发生的事情是,当您缩小浏览器窗口时,您会按降序大小顺序命中Bootstrap断点.LG,MD,SM和XS.

这些col-md-*类只影响断点MD和更大的元素; MD和LG.

在hidden-xs类,但是,只影响XS断点.

当您点击SM断点时,这些类都不会影响div问题,因此它将恢复为默认样式,全宽.

您可以hidden-sm另外使用该类,它也会在该断点处隐藏它.

这是一个方便的图表,显示哪些断点hidden和visible类影响元素:http://getbootstrap.com/css/#responsive-utilities-classes