Bootstrap 4 垂直居中 - 等高卡片 [英] Bootstrap 4 vertical center - equal height cards

查看：20
本文介绍了Bootstrap 4 垂直居中 - 等高卡片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

HTML 

<div class="row align-items-center bg-faded"><div class="col-md-2"><div class="card card-block h-100">我有很多内容包装在多行上..

<div class="col-md-6"><div class="card card-block h-100">我有一行内容.<br>还有另一行在这里..

<div class="col-md-4"><div class="card card-block h-100">我有一点.

问题演示

解决方案

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

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="样式表"/><div class="容器"><code>普通 .row 与 .card 在 .col-*</code><h6>问题是卡片内容没有居中</h6><div class="row bg-faded"><div class="col-md-2"><div class="card card-block h-100 justify-content-center align-items-center">我有很多内容包装在多行上..

<div class="col-md-6"><div class="card card-block h-100 justify-content-center align-items-center">我有一行内容.<br>还有另一行在这里..

<div class="col-md-4"><div class="card card-block h-100 justify-content-center align-items-center">我有一点.

<小时><div class="容器"><code>.align-items-center.row 与 .card 在 .col-</code><h6>问题是卡片不再是全高</h6><div class="row bg-faded"><div class="col-md-2"><div class="card card-block h-100 justify-content-center">我有很多内容包装在多行上..

<div class="col-md-6"><div class="card card-block h-100 justify-content-center">我有一行内容.<br>还有另一行在这里..

<div class="col-md-4"><div class="card card-block h-100 justify-content-center">我有一点.

I'm using Bootstrap 4 alpha 6, and attempting to use flexbox to vertically center the content of equal height cards. I've used the h-100 util class to make the cards full height with the columns..

The problem is that I want the content of each card to be aligned in the middle (centered vertically). I tried the use the .align-items-center class in the row, which works to center the cards, but then the cards are no longer equal height...

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

解决方案

Here is a simpler solution for you:

using only justify-content-center utility class because .card has already flex-direction: column property

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

这篇关于Bootstrap 4 垂直居中 - 等高卡片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆