html - 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，因此它会恢复为默认样式，全 Angular 。

您还可以使用 hidden-sm 类，它也会在该断点处隐藏它。

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