47

一段时间以来，我一直在当前的引导程序 3 上遇到这样的问题。我过去曾设法以一种或另一种方式修复它们，但这次不知道如何修复它。

我需要通过在列表项上ul交替pull-left&来创建两列。pull-right我究竟做错了什么？

http://bootply.com/92446

4

3 回答 3

156

您应该尝试使用Grid Template。

这是我用于两列布局的<ul>

<ul class="list-group row">
     <li class="list-group-item col-xs-6">Row1</li>
     <li class="list-group-item col-xs-6">Row2</li>
     <li class="list-group-item col-xs-6">Row3</li>
     <li class="list-group-item col-xs-6">Row4</li>
     <li class="list-group-item col-xs-6">Row5</li>
</ul>

这对我有用。

于 2014-04-11T06:28:04.983 回答
12

谢谢，Varun Rathore。它完美地工作！

对于那些希望根据屏幕宽度从每行 4 个项目优雅折叠到每行 2 个项目的人：

<ul class="list-group row">
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_1</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_2</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_3</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_4</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_5</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_6</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_7</li>
</ul>
于 2016-09-21T21:13:18.137 回答
8

你想太多了......看看这个[我认为这就是你想要的 - 如果不让我知道]

http://www.bootply.com/118886

css 

.even{background: red; color:white;}
.odd{background: darkred; color:white;}

html

<div class="container">
  <ul class="list-unstyled">
    <li class="col-md-6 odd">Dumby Content</li>
    <li class="col-md-6 odd">Dumby Content</li>
    <li class="col-md-6 even">Dumby Content</li>
    <li class="col-md-6 even">Dumby Content</li>
    <li class="col-md-6 odd">Dumby Content</li>
    <li class="col-md-6 odd">Dumby Content</li>
  </ul>
</div>
于 2014-03-04T23:54:50.967 回答