list Bootstrap 3 单个 ul 中的多列无法正确浮动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19836567/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 Multi-column within a single ul not floating properly
提问by davidetucci
I have been encountering problems like this on the current bootstrap 3 for a while now. I have managed to fix them in the past in one way or another but have no clue of how to fix it this time.
我在当前的引导程序 3 上遇到这样的问题已经有一段时间了。过去我已经设法以一种或另一种方式修复它们，但这次不知道如何修复它。
I need to create two columns out of one ulby alternating a pull-left& pull-righton list items. What am I doing wrong?
我需要ul通过在列表项上交替使用pull-left&来创建两列pull-right。我究竟做错了什么？
回答by Varun Rathore
You should try using the Grid Template.
您应该尝试使用Grid Template。
Here's what I've used for a two Column Layout of a <ul>
这是我用于两列布局的 <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>
This worked for me.
这对我有用。
回答by Dmitriy
Thanks, Varun Rathore. It works perfectly!
谢谢，Varun Rathore。它完美地工作！
For those who want graceful collapse from 4 items per row to 2 items per row depending on the screen width:
对于那些想要根据屏幕宽度从每行 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>
回答by Omar
you are thinking too much... Take a look at this [i think this is what you wanted - if not let me know]
你想太多了......看看这个[我认为这就是你想要的 - 如果没有让我知道]
css
css
.even{background: red; color:white;}
.odd{background: darkred; color:white;}
html
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>
