Reduce引導列表寬度

我正在創建一個列表並使用Bootstrap對其進行樣式設置。該HTML看起來是這樣的：Reduce引導列表寬度

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

嘗試在'.list-group'中添加樣式'display：inline-block' – XYZ

@XYZ我試着將它添加到元素中，而不是添加到'.list-group'中。那很簡單！非常感謝。 – Josephus

發表了這個答案，請讓我的答案如果有幫助 – XYZ

嘗試添加風格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>

來源

2017-06-05 14:25:48 XYZ

您可以使用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之內，所以引導程序list-group類是通過引導給出的自己的程序保存的。

來源

2017-06-05 14:37:48 LKG

Reduce引導列表寬度

回答

相關問題