html - 如何在 Bootstrap 4 中使每一列的高度相等?
问题描述
看看这张照片:
第二列在右边,看起来高度不等于第一列我需要弄清楚第二列应该如何获得与第一列相同的高度。
我的 HTML:
<div class="row"">
<div class="col-8">
<div class="row">
<div class="col-12 mb-2">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
<div class="col-12">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="row">
<div class="col-12">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
<div class="col-12">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
<div class="col-12">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
</div>
</div>
</div>
解决方案
使用 flexbox utils 制作正确的列display:flex, flex-direction: column
...
<div class="container-fluid">
<div class="row">
<div class="col-8">
<div class="row">
<div class="col-12 mb-2">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
<div class="col-12">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
</div>
</div>
<div class="col-4 d-flex flex-column">
<div class="row flex-fill justify-content-between">
<div class="col-12">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
<div class="col-12">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
<div class="col-12 d-flex align-items-end">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
</div>
</div>
</div>
</div>
推荐阅读
- c++ - 试图用另一个对象作为参数来构造一个对象
- flutter - Flutter Dart 函数作为另一个函数的参数
- wordpress - 为什么我的 word-press 网站显示不安全
- c# - 验证 MVC 核心中的非输入模型
- php - WooCommerce - 从面包屑中删除产品标题,但保留所有类别超链接
- java - 应该如何处理线程锁以保持其他线程等待直到下载文件然后允许所有线程一次性读取文件
- javascript - 清除命令不重复批量删除
- python - python panda链式赋值的替代方法是什么
- javascript - React 应用程序在部署到 heroku 时不显示任何内容
- python - 记录在 Python 中链接两个大型 CSV?