html - 使列表组全宽 - 出现水平滚动条

Question

我想让我的 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>

Demo on Bootply

这里唯一的问题是，当您调整浏览器窗口大小时，对于较小的分辨率(可能是 sm)，水平滚动条出现可能是因为右边距或右边距。看来它可能与此处使用 row 有关。

当我删除外部 .row div 时没有问题(没有水平滚动条出现 - Bootply demo )但在这种情况下 list-group 不会完整的容器宽度。

问题 - 是否有可能以简单的方式解决它？为什么会这样？我知道这可能不是非常标准的解决方案(我在 list-group 中放置了很多额外的 div)但如果可能的话我想让它工作。

Answer 1

您遇到的问题是缺少 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