我有以下代码:
<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>
这是一个常规面板中的可点击列表组。在足够高的分辨率下,没有问题。但是,当分辨率低于 720p 时,列表组开始占用的空间少于整个面板主体:它的高度保持不变,但宽度开始占面板主体的 2/3,并且随着分辨率变小而缩小.
我怎样才能让它始终占据面板主体的全尺寸?
最佳答案
我想你想使用最小宽度:
.list-group {
margin: 0;
min-width: 400px;
width: 100%;
}
现在,即使浏览器屏幕比列表组低也不会从 400 像素减少,但在高分辨率屏幕上它会是 100% 宽度。
关于css - Bootstrap `list-group` 继承 `panel` 的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25693384/