Bootstrap 4 垂直中心 - 等高卡片答案

【问题标题】：Bootstrap 4 vertical center - equal height cardsBootstrap 4 垂直中心 - 等高卡片
【发布时间】：2017-07-27 19:24:38
【问题描述】：

我正在使用 Bootstrap 4 alpha 6，并尝试使用 flexbox 将等高卡片的内容垂直居中。我使用了h-100 util 类使卡片与列全高..

问题是我希望每张卡片的内容在中间对齐（垂直居中）。我尝试在行中使用.align-items-center 类，它可以使卡片居中，但随后卡片不再等高......

HTML

<div class="container">
    <div class="row align-items-center bg-faded">
        <div class="col-md-2">
            <div class="card card-block h-100">
                I have a lot of content that wraps on multiple lines..
            </div>
        </div>
        <div class="col-md-6">
            <div class="card card-block h-100">
               I have a line of content.<br>
               And another line here..
            </div>
        </div>
        <div class="col-md-4">
            <div class="card card-block h-100">
                I have a little bit.
            </div>
        </div>
    </div>
</div>

Demo of problem

【问题讨论】：

标签： css flexbox bootstrap-4 twitter-bootstrap-4

【解决方案1】：

这里有一个更简单的解决方案：

仅使用 justify-content-center 实用程序类，因为 .card 已经具有 flex-direction: column 属性

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <code>normal .row with .card inside .col-*</code>
    <h6>Problem is that card content is not centered</h6>
    <div class="row bg-faded">
        <div class="col-md-2">
            <div class="card card-block h-100 justify-content-center align-items-center">
                I have a lot of content that wraps on multiple lines..
            </div>
        </div>
        <div class="col-md-6">
            <div class="card card-block h-100 justify-content-center align-items-center">
               I have a line of content.<br>
               And another line here..
            </div>
        </div>
        <div class="col-md-4">
            <div class="card card-block h-100 justify-content-center align-items-center">
                I have a little bit.
            </div>
        </div>
    </div>
</div>
<hr>
<div class="container">
    <code>.align-items-center.row with .card inside .col-</code>
    <h6>Problem is that cards are no longer full height</h6>
   <div class="row bg-faded">
        <div class="col-md-2">
            <div class="card card-block h-100 justify-content-center">
                I have a lot of content that wraps on multiple lines..
            </div>
        </div>
        <div class="col-md-6">
            <div class="card card-block h-100 justify-content-center">
               I have a line of content.<br>
               And another line here..
            </div>
        </div>
        <div class="col-md-4">
            <div class="card card-block h-100 justify-content-center">
                I have a little bit.
            </div>
        </div>
    </div>
</div>

【讨论】：

如果没有 col 类，您如何将卡片水平居中？

【解决方案2】：

我发现解决居中问题的一种方法是使用flex-column 实用程序类。由于每张卡都是display: flex，所以flex-column可以用来设置flex-direction: column。然后，justify-content-center 垂直对齐内容...

<div class="container">
    <div class="row">
        <div class="col-md-2">
            <div class="card card-block h-100 flex-column justify-content-center">
                I have a lot of content that wraps on multiple lines..
            </div>
        </div>
        <div class="col-md-6">
            <div class="card card-block h-100 flex-column justify-content-center">
               I have a line of content.<br>
               And another line here..
            </div>
        </div>
        <div class="col-md-4">
            <div class="card card-block h-100 flex-column justify-content-center">
                I have a little bit.
            </div>
        </div>
    </div>
</div>

Demo

【讨论】：