logo标签列表

创建多列列表组

htmlcsstwitter-bootstraptwitter-bootstrap-3media-queries
3

我想创建一个多列列表组，使用Bootstrap（最新版本3.2.0），以便在不同的分辨率下具有不同数量的列。

我使用以下代码来实现这个目标：

<div class="list-group col-lg-12">
<div class="col-xs-12">
    <div class="list-group-item list-group-item-info">
    <h2 class="list-group-item-heading">My title</h2>
    </div>
</div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" >
  <a href="" class="list-group-item"><span class="badge alert-info ">0</span> item1</a>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" >
<a href="" class="list-group-item"><span class="badge alert-info ">0</span> item1</a>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" >
<a href="" class="list-group-item"><span class="badge alert-info ">0</span> item1</a>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" >
<a href="" class="list-group-item"><span class="badge alert-info ">0</span> item1</a>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" >
<a href="" class="list-group-item"><span class="badge alert-info ">0</span> item1</a>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" >
<a href="" class="list-group-item"><span class="badge alert-info ">0</span> item1</a>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" >
<a href="" class="list-group-item"><span class="badge alert-info ">0</span> item1</a>
  </div>       
</div>

这个方案完全符合我的要求 - Bootply演示

然而，使用这样的解决方案会导致一个问题。当我后来想要显示任何东西时，例如：

<p class="clearfix alert alert-warning text-center">
 a piece of code
</p>

看起来清除浮动存在问题，可以在这里看到：Bootply演示

问题 - 是否可以轻松解决或者使用list-group时不能添加额外的div？我尝试使用clearfix，但没有成功。如果无法修复，是否有其他解决方案可使用Boostrap实现相同结果？我在其他组件中查找，但未发现其他内容，显然我不想使用表格。

1个回答
2

将 <div class="list-group col-lg-12"> 用 <div class="row"> 包装起来，这样清除浮动就可以正常工作了。 所有的col-md样式标签都应该放在一个类似row的div中。 Rows也应该在container中。 示例链接: http://www.bootply.com/azBEpNdMZq 更多信息请参考：http://getbootstrap.com/css/#grid

啊，不错，你注意到了。这只有在使用浮动元素（pull-left和pull-right）时才需要。 - trees_are_great
这个解决方案有一个问题。如果你看一下http://www.bootply.com/yFM4p51NJ7（我改了一些东西），你会发现在list-group内添加行会导致当你将浏览器调整到最小时，在移动设备上打开它时会出现水平滚动条。而删除它将导致list-group不会占用整个容器宽度-http://www.bootply.com/64aKo3Rtcc - Marcin Nabiałek
最近的 Bootstrap 版本中，有一些人报告了这个问题。我在这里找到了一个解决方法：https://dev59.com/iWMl5IYBdhLWcg3wcmvD 将 body { overflow-x: hidden;} 添加到你的 CSS 中将解决这个问题 - http://www.bootply.com/BV7NpHyw1e - trees_are_great
我看到了这个，但我认为它与流体容器有关，而且更适用于早期版本的Bootstrap。 - Marcin Nabiałek
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接