[英]Bootstrap grid layout not working as expected
I'm using Bootstrap 3.3.5 and I have two columns : .col-md-9
and .col-md-3
. 我正在使用Bootstrap 3.3.5,我有两列: .col-md-9
和.col-md-3
。
However, the one with the class .col-md-3
is somehow taking full width of the parent row, instead of just taking 25%. 但是,具有类.col-md-3
的那个以某种方式占据父行的全宽,而不是仅占用25%。
Why is this happening? 为什么会这样?
Note: Run the snippet in full page and resize the browser window until you can see this behaviour. 注意:在整页中运行代码段并调整浏览器窗口的大小,直到您看到此行为。
<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>
What is happening is that as you shrink your browser window you hit the Bootstrap breakpoints in descending size order. 发生的事情是,当您缩小浏览器窗口时,您会按降序大小顺序命中Bootstrap断点。 LG, MD, SM, and XS. LG,MD,SM和XS。
The col-md-*
classes only affect elements at breakpoints MD and larger; col-md-*
类仅影响断点MD和更大的元素; MD and LG. MD和LG。
The hidden-xs
class, however, only affects the XS breakpoint. 但是, hidden-xs
类仅影响XS断点。
When you hit the SM breakpoint, neither of these classes is affecting the div
in question and so it reverts to its default styling, full-width. 当您点击SM断点时,这些类都不会影响相关的div
,因此它将恢复为默认样式,全宽。
You can use the hidden-sm
class in addition and it will hide it at that breakpoint too. 你可以另外使用hidden-sm
类,它也会在那个断点处隐藏它。
Here is a handy chart that shows which breakpoints hidden
and visible
classes affect elements: http://getbootstrap.com/css/#responsive-utilities-classes 这是一个方便的图表,显示哪些断点hidden
和visible
类影响元素: http : //getbootstrap.com/css/#responsive-utilities-classes
You have to put hidden-sm
too 你也必须把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>
You want to use col-sm-*
. 你想使用col-sm-*
。
Bootstrap has 4 media queries: Bootstrap有4个媒体查询:
col-xs
col-sm
col-md
col-lg
和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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.