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

Answer 2

你也必须把hidden-sm放进去

 <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 hidden-sm 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 3

你想使用col-sm-* 。

Bootstrap有4个媒体查询：

• col-xs
• col-sm
• col-md
• 和col-lg

 <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-sm-9 col-md-9"> <div>Element</div> <div>Element</div> <div>Element</div> <div>Element</div> <div>Element</div> </div> <div class="hidden-xs col-xs-0 col-sm-3 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>