单个 ul 中的 Bootstrap 3 多列未正确浮动

Posted 2023-02-16

【中文标题】单个 ul 中的 Bootstrap 3 多列未正确浮动

【英文标题】：Bootstrap 3 Multi-column within a single ul not floating properly

【发布时间】：2013-11-19 03:15:00

【问题描述】：

我在当前的 bootstrap 3 上遇到这样的问题已经有一段时间了。我过去曾设法以一种或另一种方式修复它们，但这次不知道如何修复它。

我需要通过在列表项上交替使用 pull-left 和 pull-right 来从一列 ul 中创建两列。我做错了什么？

http://bootply.com/92446

【问题讨论】：

我知道在我的标记中包含行应该可以解决我的问题，但我希望不要破坏列表并保持一个列表。

【参考方案1】：

您应该尝试使用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>

这对我有用。

【讨论】：

这是我在 SO 上偶然发现的最优雅的解决方案之一。爱它！

多么美丽……除了给我想要的 2 列之外，它还使用引导 css 类将它们整齐地布置。谢谢

这个很整洁。将 col-xs-6 更改为 col-sm-6 使其更具响应性。

优秀的解决方案！我建议使用list-unstyled 而不是list-group 来防止默认的ul 样式。并且为了防止所有默认样式，还可以摆脱list-group-item

如果你在 UL 上设置一个固定的height，实际上它可以在 IE 上使用 BS4。设置 max-height 是不够的 :(

【参考方案2】：

谢谢，Varun Rathore。效果很好！

对于那些希望根据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>

【参考方案3】：

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

http://www.bootply.com/118886

css

.evenbackground: red; color:white;
.oddbackground: 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>