html - Bootstrap 4 列未达到 100% 高度
问题描述
我正在使用 Bootstrap 4,我注意到我的列没有达到行高的 100%。
我假设 Bootstrap 4 的一个功能是列高始终与在此工作示例中看到的行高相同:http: //demo.tutorialzine.com/2016/11/boostrap-4-常规-vs-flex-grid/?5-column-height
出于某种原因,我似乎无法产生相同的结果。我试过使用:
- 行上的对齐项目拉伸类
- 高度:列上 100%
- flex: 1 与 display:flex 和 flex-direction:column
我想知道是否有人可以解释确保 Bootstrap 4 列达到 100% 行高的正确设置方法。
(查看完整页面以获得准确的演示)
.row {
border: 1px solid green;
}
.our-research {
padding: 40px 0;
}
.our-research__container {
height: 100%;
border: 1px solid blue;
flex: 1;
display: flex;
flex-direction: column;
}
.our-research__content {
background-color: #fff;
text-align: center;
padding: 30px 35px;
color: #999;
height: 100%;
font-weight: 500;
flex: 1;
border: 1px solid red;
border-bottom-right-radius: 50px;
display: flex;
flex-direction: column;
}
.our-research__image {
position: relative;
height: 175px;
}
.our-research__image .our-research__image-main {
object-fit: cover;
height: 100%;
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<section class="our-research bg--light-grey">
<div class="container">
<div class="row align-items-stretch">
<div class="col-10 col-sm-3 our-research__container">
<div class="our-research__image">
<img class="our-research__image-main" src="http://via.placeholder.com/350x150" alt="">
</div>
<div class="our-research__content">
<h3 class="centered-heading__purple">Title</h3>
<p>Suspendisse arcu dui commodo non ornare sed consequat</p>
</div>
</div>
<div class="col-10 col-sm-3 our-research__container">
<div class="our-research__image">
<img class="our-research__image-main" src="http://via.placeholder.com/350x150" alt="">
</div>
<div class="our-research__content">
<h3 class="centered-heading__purple">Tumor Bank</h3>
<p>Suspendisse arcu dui commodo non ornare sed consequat</p>
</div>
</div>
<div class="col-10 col-sm-3 our-research__container">
<div class="our-research__image">
<img class="our-research__image-main" src="http://via.placeholder.com/350x150" alt="">
</div>
<div class="our-research__content">
<h3 class="centered-heading__purple">Research</h3>
<p>Suspendisse arcu dui commodo non ornare sed consequat</p>
</div>
</div>
<div class="col-10 col-sm-3 our-research__container">
<div class="our-research__image">
<img class="our-research__image-main" src="http://via.placeholder.com/350x150" alt="">
</div>
<div class="our-research__content">
<h3 class="centered-heading__purple">Title</h3>
<p>Suspendisse arcu dui.</p>
</div>
</div>
</div>
</div>
</section>
我在这里创建了我的问题的 jsfiddle:https ://jsfiddle.net/eilawen/zjoeh0yp/12/
任何帮助,将不胜感激。
解决方案
从 our-research_container 中删除高度。
.our-research__container {
border: 1px solid blue;
flex: 1;
display: flex;
flex-direction: column;
}
推荐阅读
- php - 时间日期条件逻辑语句 MySQL
- java - Java 将“[”和“]”写入文本文件而不是“[”和“]”
- typescript - 对象的联合类型包含用 Promise 包装的布尔文字类型
- javascript - 比较使用 CSS 和状态管理隐藏 React 组件的性能
- python-3.x - 将 list() 函数应用于字典时会发生什么?
- mysql - 如何从 CURSOR 读取数据 - mysql 存储过程
- javascript - PhpStorm 无法 Ctrl+单击打开 JavaScript 工厂文件
- ios - 带有“上一个”和“下一个”键盘的工具栏
- javascript - 在 javascript 函数中传递字符串值
- c# - 这个 C# 语句的 VB.NET 版本中是否需要 unchecked 关键字?