Div 底部在列中对齐 [英] Div bottom aligned in column

查看：24
本文介绍了Div 底部在列中对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用的是带有四列布局的 Bootstrap 4.现在我有一列文本较长，导致末尾的按钮"未对齐.

HTML 如下:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="样式表" 完整性="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="匿名"><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5storigt;m/脚本><div class="容器"><div class="row mt-4"><div class="col-lg-12 title-1 text-center">我的标题

<div class="row py-5"><div class="col-lg-3"><img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt=""><div class="text-center title-4 volume">lorem</div><小时><div class="text-center title-2">只是一个测试

<div class="button-1 text-center title-3">更多信息

<div class="col-lg-3 mt-lg-0 mt-5"><img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt=""><div class="text-center title-4 volume">lorem</div><小时><div class="text-center title-2">这是导致问题的较长文本

<div class="button-1 text-center title-3">更多信息

<div class="col-lg-3 mt-lg-0 mt-5"><img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt=""><div class="text-center title-4 volume">lorem</div><小时><div class="text-center title-2">只是一个测试

<div class="button-1 text-center title-3">更多信息

<div class="col-lg-3 mt-lg-0 mt-5"><img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt=""><div class="text-center title-4 volume">lorem</div><小时><div class="text-center title-2">只是一个测试

<div class="button-1 text-center title-3 align-self-end">更多信息

那么我该怎么做才能使所有列的按钮"对齐?

解决方案

制作列 flexbox (d-flex flex-column)，然后使用 mt-auto 将按钮推到底...

<div class="row mt-4"><div class="col-lg-12 title-1 text-center">我的标题
<div class="row py-5 border"><div class="col-lg-3 d-flex flex-column"><img class="img-fluid mx-auto d-block";src=https://via.placeholder.com/510x661.png"；alt="><div class="text-center title-4 volume">lorem</div><小时><div class="text-center title-2">只是一个测试
<div class="button-1 text-center title-3 mt-auto">更多信息
<div class="col-lg-3 mt-lg-0 mt-5 d-flex flex-column"><img class="img-fluid mx-auto d-block";src=https://via.placeholder.com/510x661.png"；alt="><div class="text-center title-4 volume">lorem</div><小时><div class="text-center title-2">这是导致问题的较长文本
<div class="button-1 text-center title-3 mt-auto">更多信息
<div class="col-lg-3 mt-lg-0 mt-5 d-flex flex-column"><img class="img-fluid mx-auto d-block";src=https://via.placeholder.com/510x661.png"；alt="><div class="text-center title-4 volume">lorem</div><小时><div class="text-center title-2">只是一个测试
<div class="button-1 text-center title-3 mt-auto">更多信息
<div class=col-lg-3 mt-lg-0 mt-5 d-flex flex-column"><img class="img-fluid mx-auto d-block";src=https://via.placeholder.com/510x661.png"；alt="><div class="text-center title-4 volume">lorem</div><小时><div class="text-center title-2">只是一个测试
<div class="button-1 text-center title-3 mt-auto">更多信息

https://codeply.com/go/B1vKo06A3i

I am using Bootstrap 4 with a four column layout. Now I have one column with longer text which causes the "buttons" at the end to be not aligned.

The HTML is as follows:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <div class="container">
        <div class="row mt-4">
            <div class="col-lg-12 title-1 text-center">
                My Headline
            </div>
        </div>
        <div class="row py-5">
            <div class="col-lg-3">
                <img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
                <div class="text-center title-4 volume">lorem</div>
                <hr>
                <div class="text-center title-2">
                    Just a test
                </div>
                <div class="button-1 text-center title-3">
                        MORE INFOS
                </div>
            </div>
            <div class="col-lg-3 mt-lg-0 mt-5">
                <img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
                <div class="text-center title-4 volume">lorem</div>
                <hr>
                <div class="text-center title-2">
                    This is longer text which causes the issue
                </div>
                <div class="button-1 text-center title-3">
                        MORE INFOS
                </div>
            </div>
            <div class="col-lg-3 mt-lg-0 mt-5">
                <img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
                <div class="text-center title-4 volume">lorem</div>
                <hr>
                <div class="text-center title-2">
                        Just a test
                </div>
                <div class="button-1 text-center title-3">
                        MORE INFOS
                </div>
            </div>
            <div class="col-lg-3 mt-lg-0 mt-5">
                <img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
                <div class="text-center title-4 volume">lorem</div>
                <hr>
                <div class="text-center title-2">
                        Just a test
                </div>
                <div class="button-1 text-center title-3 align-self-end">
                    MORE INFOS
                </div>
            </div>
        </div>
    </div>

So what can I do to make the "buttons" of all columns aligned?

解决方案

Make the columns flexbox (d-flex flex-column), and then use mt-auto to push the buttons to the bottom...

<div class="container">
    <div class="row mt-4">
        <div class="col-lg-12 title-1 text-center">
            My Headline
        </div>
    </div>
    <div class="row py-5 border">
        <div class="col-lg-3 d-flex flex-column">
            <img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
            <div class="text-center title-4 volume">lorem</div>
            <hr>
            <div class="text-center title-2">
                Just a test
            </div>
            <div class="button-1 text-center title-3 mt-auto">
                    MORE INFOS
            </div>
        </div>
        <div class="col-lg-3 mt-lg-0 mt-5  d-flex flex-column">
            <img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
            <div class="text-center title-4 volume">lorem</div>
            <hr>
            <div class="text-center title-2">
                This is longer text which causes the issue
            </div>
            <div class="button-1 text-center title-3 mt-auto">
                    MORE INFOS
            </div>
        </div>
        <div class="col-lg-3 mt-lg-0 mt-5  d-flex flex-column">
            <img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
            <div class="text-center title-4 volume">lorem</div>
            <hr>
            <div class="text-center title-2">
                    Just a test
            </div>
            <div class="button-1 text-center title-3 mt-auto">
                    MORE INFOS
            </div>
        </div>
        <div class="col-lg-3 mt-lg-0 mt-5  d-flex flex-column ">
            <img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
            <div class="text-center title-4 volume">lorem</div>
            <hr>
            <div class="text-center title-2">
                    Just a test
            </div>
            <div class="button-1 text-center title-3  mt-auto">
                MORE INFOS
            </div>
        </div>
    </div>
</div>

https://codeply.com/go/B1vKo06A3i

这篇关于Div 底部在列中对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

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