Bootstrap 4相等的列高 - 内部的按钮没有推到底部

【问题标题】：Bootstrap 4 equal column height - buttons inside not pushing to bottomBootstrap 4相等的列高 - 内部的按钮没有推到底部
【发布时间】：2019-03-05 04:20:06
【问题描述】：

所以我使用引导程序 4 类“h-100”使所有 3 列的高度相等，因此当一个 div 内部的数据变大时，所有 3 个 div 都匹配高度。但是我最初设置在每个 div 底部的按钮现在没有与底部对齐。我怎样才能让按钮与底部对齐并具有相同的列高

h-100 之前

h-100 之后

我的代码 

h1, h2, h3, h4, h5, h6 {
  font-family: 'Teko', sans-serif;
}
html {
  font-size: 18px;
}
@media (min-width: 576px) {
  .container {
    max-width: 540px;
 }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
 }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
 }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1400px;
 }
}
h1, .h1 {
  font-size: 3.815rem;
}
h2, .h2 {
  font-size: 2.441rem;
}
h3, .h3 {
  font-size: 1.563rem;
}
h4, .h4 {
  font-size: 1.25rem;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Teko', sans-serif;
}
.threecol-teaser-cardWrap .threecol-teaser-card a {
  text-decoration: none;
  color: #000;
}
.threecol-teaser-cardWrap .threecol-teaser-card h3 {
  padding: 1.953rem;
}
.threecol-teaser-cardWrap .threecol-teaser-card p.card-text {
  padding: 1.953rem 1.953rem 0.953rem 1.953rem;
}
.threecol-teaser-cardWrap .threecol-teaser-card hr {
  border: 0;
  border-top: 1px solid #d4272e;
  width: 30%;
  margin: 0;
  transition: width 250ms ease-in-out 0s;
}
.threecol-teaser-cardWrap .threecol-teaser-card:hover hr {
  width: 100%;
  -webkit-transition: ease-out 0.2s;
  -moz-transition: ease-out 0.2s;
  transition: ease-out 0.2s;
}
.threecol-teaser-cardWrap .threecol-teaser-card .threecol-teaser-bottomText {
  width: 100%;
  text-align: left;
  border-radius: 0px;
  padding: 0.953rem 1.953rem 1.563rem 1.953rem;
  color: #d4272e;
  box-shadow: inset 0 0 0 0 #d4272e;
  -webkit-transition: ease-out 0.2s;
  -moz-transition: ease-out 0.2s;
  transition: ease-out 0.2s;
}
.threecol-teaser-cardWrap .threecol-teaser-card .threecol-teaser-bottomText .ion-ios-arrow-thin-right {
  position: relative;
  top: 4px;
  display: inline-block;
  padding-right: 1rem;
  padding-left: 0.5rem;
  font-family: Ionicons, sans-serif;
  font-size: 150%;
  transition: transform 300ms ease-in-out 0s;
  transform: translateX(8px) translateY(0px) translateZ() scaleX(1.25) scaleY(1.25) scaleZ(1);
}
.threecol-teaser-cardWrap .threecol-teaser-card:hover .threecol-teaser-bottomText {
  box-shadow: inset 0 100px 0 0 #d4272e;
  color: #fff;
  background-color: #d4272e;
}
.threecol-teaser-cardWrap .threecol-teaser-card:hover .threecol-teaser-bottomText .ion-ios-arrow-thin-right {
  transition: transform 300ms ease-in-out 0s;
  transform: translateX(8px) translateY(0px) translateZ(0px) scaleX(1.25) scaleY(1.25) scaleZ(1);
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script> -->
    <script src="https://code.jquery.com/jquery-3.3.1.js"
        integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>


    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
        integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
        integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
        integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="./style/index.css">
</head>

<body>

    <section class="threecol-teaser-cardWrap py-10">
        <div class="container">
            <div class=" mb-8">
                <div class="text-left mb-8">
                    <h2>
                        Title
                    </h2>
                </div>
                <div class="Benefits-Card">
                    <div class="row">
                        <div class="threecol-teaser-card col-lg-4 mb-6">
                            <a href="">
                                <div class="border border-primary ">
                                    <h3 class="">
                                        title 1
                                    </h3>
                                    <hr>

                                    <p class="card-text">
                                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum facilis
                                        libero, aperiam fuga accusamus eos harum pariatur nulla sapiente sit animi ut
                                        magni? Suscipit, labore repellat quos animi minus soluta?

                                    </p>
                                    <div class="threecol-teaser-bottomText ">

                                        button 1 <i class="ion-ios-arrow-thin-right" aria-hidden="true"></i>

                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="threecol-teaser-card col-lg-4 mb-6">
                            <a href="">
                                <div class="border border-primary ">
                                    <h3 class="">
                                        title 1
                                    </h3>
                                    <hr>

                                    <p class="card-text">
                                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum facilis
                                        libero, aperiam fuga accusamus eos harum pariatur nulla sapiente sit animi ut
                                        magni? Suscipit, labore repellat quos animi minus soluta?
                                        rum pariatur nulla sapiente sit animi ut
                                        magni? Suscipit, labore repellat quos animi minus soluta?

                                    </p>
                                    <div class="threecol-teaser-bottomText">

                                        button 1 <i class="ion-ios-arrow-thin-right" aria-hidden="true"></i>

                                    </div>
                                </div>
                            </a>
                        </div>

                        <div class="threecol-teaser-card col-lg-4 mb-6">
                            <a href="">
                                <div class="border border-primary ">
                                    <h3 class="">
                                        title 1
                                    </h3>
                                    <hr>

                                    <p class="card-text">
                                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum facilis
                                        libero, aperiam fuga accusamus eos harum pariatur nulla sapiente sit animi ut
                                        magni? Suscipit, labore repellat quos animi minus soluta?
                                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum facilis
                                        libero, aperiam fuga accusamus eos harum pariatur nulla sapiente sit animi ut
                                        magni? Suscipit, labore repellat quos animi minus soluta?

                                    </p>
                                    <div class="threecol-teaser-bottomText">

                                        button 1 <i class="ion-ios-arrow-thin-right" aria-hidden="true"></i>

                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>

</body>

</html>
</body>

</html>

【问题讨论】：

    标签： html twitter-bootstrap css bootstrap-4


    【解决方案1】：

    只需使用引导类即可达到所需的效果。

    所需的更改是

    1. 将h-100 类添加到您的卡片中
    2. 通过添加类d-flex 和flex-column 使卡片列成为弹性容器
    3. 使用 mb-auto 类为按钮前的文本添加自动下边距，以便将按钮一直推到容器下方

    结果如下面的sn-p所示：

    h1, h2, h3, h4, h5, h6 {
  font-family: 'Teko', sans-serif;
}
html {
  font-size: 18px;
}
@media (min-width: 576px) {
  .container {
    max-width: 540px;
 }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
 }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
 }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1400px;
 }
}
h1, .h1 {
  font-size: 3.815rem;
}
h2, .h2 {
  font-size: 2.441rem;
}
h3, .h3 {
  font-size: 1.563rem;
}
h4, .h4 {
  font-size: 1.25rem;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Teko', sans-serif;
}
.threecol-teaser-cardWrap .threecol-teaser-card a {
  text-decoration: none;
  color: #000;
}
.threecol-teaser-cardWrap .threecol-teaser-card h3 {
  padding: 1.953rem;
}
.threecol-teaser-cardWrap .threecol-teaser-card p.card-text {
  padding: 1.953rem 1.953rem 0.953rem 1.953rem;
}
.threecol-teaser-cardWrap .threecol-teaser-card hr {
  border: 0;
  border-top: 1px solid #d4272e;
  width: 30%;
  margin: 0;
  transition: width 250ms ease-in-out 0s;
}
.threecol-teaser-cardWrap .threecol-teaser-card:hover hr {
  width: 100%;
  -webkit-transition: ease-out 0.2s;
  -moz-transition: ease-out 0.2s;
  transition: ease-out 0.2s;
}
.threecol-teaser-cardWrap .threecol-teaser-card .threecol-teaser-bottomText {
  width: 100%;
  text-align: left;
  border-radius: 0px;
  padding: 0.953rem 1.953rem 1.563rem 1.953rem;
  color: #d4272e;
  box-shadow: inset 0 0 0 0 #d4272e;
  -webkit-transition: ease-out 0.2s;
  -moz-transition: ease-out 0.2s;
  transition: ease-out 0.2s;
}
.threecol-teaser-cardWrap .threecol-teaser-card .threecol-teaser-bottomText .ion-ios-arrow-thin-right {
  position: relative;
  top: 4px;
  display: inline-block;
  padding-right: 1rem;
  padding-left: 0.5rem;
  font-family: Ionicons, sans-serif;
  font-size: 150%;
  transition: transform 300ms ease-in-out 0s;
  transform: translateX(8px) translateY(0px) translateZ() scaleX(1.25) scaleY(1.25) scaleZ(1);
}
.threecol-teaser-cardWrap .threecol-teaser-card:hover .threecol-teaser-bottomText {
  box-shadow: inset 0 100px 0 0 #d4272e;
  color: #fff;
  background-color: #d4272e;
}
.threecol-teaser-cardWrap .threecol-teaser-card:hover .threecol-teaser-bottomText .ion-ios-arrow-thin-right {
  transition: transform 300ms ease-in-out 0s;
  transform: translateX(8px) translateY(0px) translateZ(0px) scaleX(1.25) scaleY(1.25) scaleZ(1);
}
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script> -->
    <script src="https://code.jquery.com/jquery-3.3.1.js"
        integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>


    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
        integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
        integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
        integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="./style/index.css">
</head>

<body>

    <section class="threecol-teaser-cardWrap py-10">
        <div class="container">
            <div class=" mb-8">
                <div class="text-left mb-8">
                    <h2>
                        Title
                    </h2>
                </div>
                <div class="Benefits-Card">
                    <div class="row">
                        <div class="threecol-teaser-card col-lg-4 mb-6">
                            <a href="">
                                <div class="border border-primary h-100 d-flex flex-column">
                                    <h3 class="">
                                        title 1
                                    </h3>
                                    <hr>

                                    <p class="card-text  mb-auto">
                                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum facilis
                                        libero, aperiam fuga accusamus eos harum pariatur nulla sapiente sit animi ut
                                        magni? Suscipit, labore repellat quos animi minus soluta?

                                    </p>
                                    <div class="threecol-teaser-bottomText ">

                                        button 1 <i class="ion-ios-arrow-thin-right" aria-hidden="true"></i>

                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="threecol-teaser-card col-lg-4 mb-6">
                            <a href="">
                                <div class="border border-primary  h-100 d-flex flex-column">
                                    <h3 class="">
                                        title 1
                                    </h3>
                                    <hr>

                                    <p class="card-text mb-auto">
                                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum facilis
                                        libero, aperiam fuga accusamus eos harum pariatur nulla sapiente sit animi ut
                                        magni? Suscipit, labore repellat quos animi minus soluta?
                                        rum pariatur nulla sapiente sit animi ut
                                        magni? Suscipit, labore repellat quos animi minus soluta?

                                    </p>
                                    <div class="threecol-teaser-bottomText">

                                        button 1 <i class="ion-ios-arrow-thin-right" aria-hidden="true"></i>

                                    </div>
                                </div>
                            </a>
                        </div>

                        <div class="threecol-teaser-card col-lg-4 mb-6">
                            <a href="">
                                <div class="border border-primary  h-100 d-flex flex-column">
                                    <h3 class="">
                                        title 1
                                    </h3>
                                    <hr>

                                    <p class="card-text mb-auto">
                                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum facilis
                                        libero, aperiam fuga accusamus eos harum pariatur nulla sapiente sit animi ut
                                        magni? Suscipit, labore repellat quos animi minus soluta?
                                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum facilis
                                        libero, aperiam fuga accusamus eos harum pariatur nulla sapiente sit animi ut
                                        magni? Suscipit, labore repellat quos animi minus soluta?

                                    </p>
                                    <div class="threecol-teaser-bottomText">

                                        button 1 <i class="ion-ios-arrow-thin-right" aria-hidden="true"></i>

                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>

</body>

</html>
</body>

</html>

    【讨论】：

    • 正是我所期待的，引导解决方案甚至更好。非常感谢
    【解决方案2】：

    据我所知，当您使用 Bootstrap，然后使用 CSS 更改主标签的样式（如 h1、h2、div）时，它会影响您从 bootstrap 中出现的所有原始样式，一个潜在的解决方案是，给每个标记一个唯一的 id OR 类，然后更改它，第二个是，您可以使用功能忽略 CSS 中的任何其他冲突，例如：

    *{
   box-sizing: border-box;
}

    您可以阅读有关此问题的信息 Lagacy CSS Conflicts

    【讨论】：

    • 对不起，我的表述不清楚，我的意思是，我给出的示例仅解决了 CSS 中的一个冲突，您可以阅读有关 CSS 和 Bootstrap 之间特定冲突问题的更多信息。跨度>
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-02-23
    • 2023-03-12
    • 2018-09-23
    • 1970-01-01
    • 2020-02-02
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode