我正在使用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>
答案 0 :(得分:5)
当您缩小浏览器窗口时,您会按降序大小顺序点击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
答案 1 :(得分:1)
你必须放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>
答案 2 :(得分:-1)
您想使用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>