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

Question

我有以下代码:

<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，并且随着分辨率变小而缩小.

我怎样才能让它始终占据面板主体的全尺寸？

Answer 1

我想你想使用最小宽度:

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

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