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%的宽度。