我正在创建一个列表,并用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>
当此显示时,列表元素将占据整个页面。
如果不是因为颜色,这不是什么大问题。如何才能使列表元素仅延伸到文本?谢谢!
发布于 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>
发布于 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提供的。
发布于 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
https://stackoverflow.com/questions/44371155
复制相似问题