Question

所以我在里面有一个列表组的小组。

我可以尝试让它在没有html更改的情况下显示在2列中。我只是想在一个长列表中一个接一个地编写页面，然后让css在768上的大型媒体上分成2列。

现在我为list-group-item添加了一个宽度：50％，但是它使整个列表达到50％，它甚至不会向右推送。

http://www.bootply.com/WElVzZr6pO

这是一种正确的方法吗，或者是否有更好的方式来做这样的事情。

由于

Answer 1

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

我希望有所帮助。

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个列表列

2 个答案: