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>