减小引导列表宽度
减小引导列表宽度
提问于 2017-06-05 22:22:55
我正在创建一个列表，并用Bootstrap设置它的样式。HTML如下所示：
<div class="list-group">
<a href="/link" class="list-group-item list-group-item-success">Name</a>
<a href="/link" class="list-group-item list-group-item-danger">Name</a>
</div>当此显示时，列表元素将占据整个页面。
如果不是因为颜色，这不是什么大问题。如何才能使列表元素仅延伸到文本？谢谢!
回答 4
Stack Overflow用户
回答已采纳
发布于 2017-06-05 22:25:49
尝试向.list-group添加样式display:inline-block
.list-group{
display:inline-block;
}
<div class="list-group">
<a href="/link" class="list-group-item list-group-item-success">Name</a>
<a href="/link" class="list-group-item list-group-item-danger">Name</a>
</div>Stack Overflow用户
发布于 2017-06-05 22:37:48
可以使用display:inline或display:inline-block属性来获取它
.somethingClass > .list-group {
display:inline-block; /* You can use inline also */
}HTML部件
<div class="somethingClass">
<div class="list-group">
<a href="/link" class="list-group-item list-group-item-success">Name</a>
<a href="/link" class="list-group-item list-group-item-danger">Name</a>
</div>
</div>当你使用somethingClass > list-group时，它只会在list-group进入somethingCalss时起作用，所以bootstrap list-group类是用自己的属性保存的，这个属性是由bootstrap提供的。
Stack Overflow用户
发布于 2019-05-13 01:13:55
Bootstrap包括速记、响应、边距和填充实用程序类，用于修改元素的外观。
<li class="list-group-item p-0">Something in list.</li>
.p-0 { padding: 0 !important; }有关bootstrap 4.0，请参阅bootstrap documentation reference
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44371155
复制相关文章
相似问题