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

Question

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

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

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

http://www.bootply.com/WElVzZr6pO

这是正确的做法吗，或者有更好的方法吗？

谢谢

Answer 1

你不会发明轮子，可能想改用 Grid https://getbootstrap.com/examples/grid/ 您可以将 .col-xs-6 用作左侧和右侧的 class（适用于移动设备和桌面设备。）

希望对您有所帮助。

Answer 2

参考这个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>

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

Bootstrap - 2 List Columns in 1 Panel

css

list

panel

twitter-bootstrap