我想让我的 list-group
具有多列的完整容器宽度 (Bootstrap 3.2.0)。我创建了以下代码:
<div class="container" style="background: red;">
<div class="row">
<div class="list-group">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<a href="" class="list-group-item">item1</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<a href="" class="list-group-item">item2</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<a href="" class="list-group-item">item3</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<a href="" class="list-group-item">item4</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<a href="" class="list-group-item">item5</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<a href="" class="list-group-item">item6</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<a href="" class="list-group-item">item7</a>
</div>
</div>
</div>
</div>
<p class="row alert alert-warning text-center">
message here
</p>
</div>
这里唯一的问题是,当您调整浏览器窗口大小时,对于较小的分辨率(可能是 sm),水平滚动条出现可能是因为右边距或右边距。看来它可能与此处使用 row
有关。
当我删除外部 .row
div 时没有问题(没有水平滚动条出现 - Bootply demo )但在这种情况下 list-group
不会完整的容器宽度。
问题 - 是否有可能以简单的方式解决它?为什么会这样?我知道这可能不是非常标准的解决方案(我在 list-group
中放置了很多额外的 div)但如果可能的话我想让它工作。
最佳答案
您遇到的问题是缺少 col-*
类。 Bootstrap 要求嵌套行需要其中的列作为直接子项,但您的层次结构为 container
-> row
-> row
-> col-*
.所以你只需要在中间插入一个 col-xs-12
,或者更简单地说,将该类添加到你的 list-group
div。
<div class="container" style="background: red;">
<div class="row">
<div class="col-xs-12 list-group">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<a href="" class="list-group-item">item1</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<a href="" class="list-group-item">item2</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<a href="" class="list-group-item">item3</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<a href="" class="list-group-item">item4</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<a href="" class="list-group-item">item5</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<a href="" class="list-group-item">item6</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<a href="" class="list-group-item">item7</a>
</div>
</div>
</div>
</div>
<p class="row alert alert-warning text-center">
message here
</p>
</div>
Bootply 在这里:http://www.bootply.com/jIW90o3ZCA
关于html - 使列表组全宽 - 出现水平滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26592073/