twitter-bootstrap - 如何在 Bootstrap V4 中为列表组设置组标题？

Question

我正在尝试实现类似示例中的内容，其中我拥有州名称及其下方的所有城市。我不知道在 Bootstrap 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

在我看来，你做得很好。

实现它的另一种方法是使用卡片。用于水平对齐目的。

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

现在如果你想一次显示一个，你可以使用 Accordion 。

link to achieve collapse