Bootstrap - 1 个面板中的 2 个列表列答案

【问题标题】：Bootstrap - 2 List Columns in 1 PanelBootstrap - 1 个面板中的 2 个列表列
【发布时间】：2017-08-07 01:40:00
【问题描述】：

所以我有一个面板，里面有一个列表组。

我可以尝试让它在不更改 html 的情况下显示在 2 列中。我只想在一个长列表中一个接一个地对页面进行编码，然后让 css 在超过 768 的大型媒体上将其分成 2 列。

现在我在 list-group-item 中添加了一个 width: 50% ，但它使整个列表变为 50%，它甚至不会向右推。

http://www.bootply.com/WElVzZr6pO

这是一种正确的方法吗，还是有更好的方法来处理类似的事情。

谢谢

【问题讨论】：

标签： css twitter-bootstrap list panel

【解决方案1】：

请参阅此http://www.bootply.com/6LTURNp6Fq。添加“col-xs-6”和“list-group-item”，例如，

<div class="list-group">
                <a href="#" class="list-group-item col-xs-6">Mobile Phones <span class="badge">Check Balance</span></a>
                <a href="#" class="list-group-item col-xs-6">Laptops &amp; Desktops <span class="badge">Check Balance</span></a>
                <a href="#" class="list-group-item col-xs-6">Mobile Phones <span class="badge">Check Balance</span></a>
                <a href="#" class="list-group-item col-xs-6">Laptops &amp; Desktops <span class="badge">Check Balance</span></a>
                <a href="#" class="list-group-item col-xs-6">Mobile Phones <span class="badge">Check Balance</span></a>
                <a href="#" class="list-group-item col-xs-6">Laptops &amp; Desktops <span class="badge">Check Balance</span></a>
    </div>

【讨论】：

@aBe ：很高兴它有帮助！

【解决方案2】：

您不应该发明轮子，可能想使用 Grid 代替 https://getbootstrap.com/examples/grid/ 您可以使用 .col-xs-6 作为左侧和右侧的类（适用于移动设备和桌面设备。）

希望对你有帮助。

【讨论】：