ブートストラップV4のリストグループにグループ見出しを付けるにはどうしたらいいですか？

Question

私は州の名前とその下のすべての都市の名前がある例のようなものを実現しようとしています。私はこれがブートストラップV4でそれを行う正しい方法なのかどうかわからないのですか？意味論的に大きなリストを小さくすることを探しています。したがって、angular2アプリでhtmlを使用できます。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 

 
<div style="margin:50px"> 
 
    <ul class="list-group"><h1>Alabama</h1> 
 
    <li class="list-group-item">Alexander City</li> 
 
    <li class="list-group-item">Andalusia</li> 
 
    <li class="list-group-item">Anniston</li> 
 
    <li class="list-group-item">Athens</li> 
 
    <li class="list-group-item">Atmore</li> 
 
    </ul> 
 
    <ul class="list-group"><h1>Alaska</h1> 
 
    <li class="list-group-item">Ajo</li> 
 
    <li class="list-group-item">Avondale</li> 
 
    <li class="list-group-item">Bisbee</li> 
 
    <li class="list-group-item">Casa Grande</li> 
 
    <li class="list-group-item">Chandler</li> 
 
    </ul> 
 
</div>

Answer 1

あなたはうまくやっている私によります。

これを達成するもう1つの方法は、カードを使用することです。 horzontal整列の目的のために。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 

 
<div style="margin:50px"> 
 
<div class="card-group"> 
 
    <div class="card"> 
 
    <div class="card-block"><h1 class="card-title">Alabama</h1> 
 
    <p class="card-text">Alexander City</p> 
 
    <p class="card-text">Andalusia</p> 
 
    <p class="card-text">Anniston</p> 
 
    <p class="card-text">Athens</p> 
 
    <p class="card-text">Atmore</p> 
 
    </div> 
 
    </div> 
 
    <div class="card"> 
 
    <div class="card-block"><h1 class="card-title">Alaska</h1> 
 
    <p class="card-text">Ajo</p> 
 
    <p class="card-text">Avondale</p> 
 
    <p class="card-text">Bisbee</p> 
 
    <p class="card-text">Casa Grande</p> 
 
    <p class="card-text">Chandler</p> 
 
    </div> 
 
    </div> 
 
</div>

今、あなたはあなたがアコーディオンを使用することができます一度に表示したい場合は1。

link to achieve collapse