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

据我说你做得很好。

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

＆＃13;

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

＆＃13;

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

link to achieve collapse

如何在Bootstrap V4中为list-group设置组标题？

1 个答案: