Bootstrap 4 Alpha 6 中的 Card 居中对齐 'list group item'？

Question

有谁知道如何在 Bootstrap 4 Alpha 6 更新中对齐 'list-group-item'？我可以将 text-center 添加到卡片本身，这会将卡片 header 和链接居中对齐，但是列表组不会移动。

我试过 mx-auto class，这会将文本移到中央，但是边框缩小到只适合文本所以看起来不合适

Example of card text center issue.

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

<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

EDIT 根据评论，您必须像这样居中对齐每个 <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 中的 Card 居中对齐 'list group item'？

Center align 'list group item' within Card in Bootstrap 4 Alpha 6?

twitter-bootstrap

bootstrap-4

twitter-bootstrap-4