ブートストラップリストの幅を小さくする

Question

私はリストを作成し、ブートストラップでスタイリングしています。 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

.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-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を使用している場合は取得するdisplay:inlineまたはdisplay:inline-blockプロパティを使用することができますefフェクトのみlist-groupsomethingCalssのようになるので、ブートストラップlist-groupクラスはブートストラップによって与えられる自分の特性で保存されます。