Question

有没有人知道如何在Bootstrap 4 Alpha 6更新中对齐'list-group-item'？我可以在卡片本身添加文本中心，这会集中对齐卡片头和链接，但列表组不会移动。

我已经尝试了mx-auto类，这会集中移动文本，但边框缩小到只适合文本，所以看起来不合适

这是我一直在测试的代码：

<div class="card" style="width: 20rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-block">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Answer 1

在卡上使用align-items-center ..

  <div class="card align-items-center" style="width: 20rem;">
        <img class="card-img-top" src="..." alt="Card image cap">
        <div class="card-block text-center">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
        <ul class="list-group list-group-flush">
            <li class="list-group-item">Cras justo odio</li>
            <li class="list-group-item">Dapibus ac facilisis in</li>
            <li class="list-group-item">Vestibulum at eros</li>
        </ul>
        <div class="card-block">
            <a href="#" class="card-link">Card link</a>
            <a href="#" class="card-link">Another link</a>
        </div>
  </div>

演示 http://www.codeply.com/go/cc1EYpkRSe

编辑根据评论，您必须将每个<li>居中对齐..

<ul class="list-group list-group-flush w-100 align-items-stretch">
   <li class="list-group-item text-center d-inline-block">Cras justo odio</li>
   <li class="list-group-item text-center d-inline-block">Dapibus ac facilisis in</li>
   <li class="list-group-item text-center d-inline-block">Vestibulum at eros</li>
</ul>

在Bootstrap 4 Alpha 6中的卡中心对齐'列表组项'？

1 个答案: