html - Bootstrap 4相等的列高 - 内部的按钮没有推到底部
问题描述
所以我使用引导程序 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>解决方案
您只需使用引导类即可达到所需的效果。
所需的更改是
h-100为您的卡片添加课程- 通过添加类
d-flex和flex-column - 使用类将自动下边距添加
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>推荐阅读
- r - 如何从 R 中的回归模型列表中提取对象？
- sql-server - 如何编写此更新查询？
- c# - 如何从 PDF 中读取 PieceInfo 每页元数据
- antlr - 如何使用 ANTLR4 为非常规语法编写语法
- ios - Kotlin 多平台项目无法从 XCFramework 中找到模块
- sonarqube - 如何审核通过@SupressWarnings 忽略的违规行为
- python - 类本地范围的 Python 问题
- c++ - C++ LLVM unique_ptr 问题
- javascript - 将参数传递给 Vue.js 中的 .sort 函数
- jquery - 当输入的数据属性改变时显示隐藏元素