css - Bootstrap`list-group`继承了`panel`的大小

我有以下代码：

<div class="panel panel-default">
<div class="panel-body">
    <div class="list-group">
        <ul class="list-group-item"><a href="#">Item one</a></ul>
        <ul class="list-group-item"><a href="#">Item two</a></ul>
    </div>
</div>
</div>

http://jsfiddle.net/c1e3erxt/

这是常规面板中的可单击列表组。在足够高的分辨率下，没有问题。但是，当分辨率下降到低于720p时，列表组开始占用的空间少于整个面板主体：高度保持不变，但是宽度开始占用面板主体的2/3，并且随着分辨率变小而缩小。

如何使它始终占据面板主体的整个尺寸？

最佳答案

我认为您想使用最小宽度：

.list-group {
    margin: 0;
    min-width: 400px;
    width: 100%;
 }

现在，即使浏览器屏幕较低，列表组也不会从400像素减少，但是在高分辨率屏幕中，宽度为100％。