Question

我想使用多列（Bootstrap 3.2.0）创建list-group完整容器宽度。我创建了以下代码：

<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不会占据整个容器宽度。< / p>

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

Answer 1

您遇到的问题是您缺少col-*课程。 Bootstrap要求嵌套行需要其中的列作为直接子项，但您的层次结构需要container - ＆gt; row - ＆gt; row - ＆gt; 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

Answer 2

如果您不希望list-group-items之间有任何间距，那么您需要将list-group-item类添加到列中：

<div class="container" style="background: red;">  
  <div class="row list-group">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 list-group-item">
      <a href="">item1</a>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 list-group-item">
      <a href="">item1</a>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 list-group-item">
      <a href="">item1</a>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 list-group-item">
      <a href="">item1</a>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 list-group-item">
      <a href="">item1</a>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 list-group-item">
      <a href="">item1</a>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 list-group-item">
      <a href="">item1</a>
    </div>
  </div>
</div>

制作列表组全宽 - 水平滚动条

2 个答案: