html - Bootstrap 4 等高列高 - 里面的按钮不推到底部

所以我使用 bootstrap 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>

最佳答案

您只需使用 Bootstrap 类就可以达到所需的效果。

所需的更改是

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

结果显示在下面的代码片段中:

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>

关于html - Bootstrap 4 等高列高 - 里面的按钮不推到底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54990188/

html - Bootstrap 4 等高列高 - 里面的按钮不推到底部

上一篇：html - 如何有两个 div，一个在父 div 的左侧，另一个在右侧？

下一篇：css - Less 中的＆符号和双＆符号有什么区别？