减少Bootstrap列表宽度

Question

我正在创建一个列表并使用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>

当显示时，列表元素占用整个页面。

如果不是着色，这不会是一个大问题。如何才能使列表元素只延伸到文本？谢谢！

Answer 1

尝试将样式display:inline-block添加到.list-group

.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>

Answer 2

您可以使用display:inline或display:inline-block属性来获取

.somethingClass > .list-group {
   display:inline-block; /* You can use inline also */
}

HTML PART

    <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进入list-group，因此bootstrap List类会自行保存，并由bootstrap提供。

Answer 3

Bootstrap包括速记响应边距和填充实用程序类，用于修改元素的外观。

<li class="list-group-item p-0">Something in list.</li>
.p-0 { padding: 0 !important; }

有关引导程序4.0，请参见bootstrap documentation reference