引导程序 4 行高
[英] bootstrap 4 row height
本文介绍了引导程序 4 行高的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我尝试使用 bootstrap 4
绿行和红行高度相等
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="样式表"/><div class="容器"><div class="row"><div class="col-md-8 col-lg-6 B"><div class="card card-inverse" style="background-color: #333; border-color: #333;">;<img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="响应式图片"></div></div><div class="col-md-4 col-lg-3 G"><div class="row"><div class="col-md-6 col-lg-6 B"><div class="card card-inverse" style="background-color: #333; border-color: #333;">;<img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="响应式图片"></div></div><div class="col-md-6 col-lg-6 B"><div class="card card-inverse" style="background-color: #333; border-color: #333;">;<img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="响应式图片"></div></div><div class="col-md-12"><div class="card card-inverse" style="background-color: #333; border-color: #333;"><img src="http://lorempicsum.com/rio/800/500/3" class="img-fluid" alt="响应式图片"></div></div>
所有图像都具有相同的大小并且具有响应性但问题是我不能在绿行和红行的高度上获得相同的大小
解决方案
使用调整工具类...
h-50 = 高度 50%h-100 = 高度 100%
<小时>
http://www.codeply.com/go/Y3nG0io2uE
<div class="row"><div class="col-md-8 col-lg-6 B"><div class="card card-inverse card-primary"><img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="响应式图片">
<div class="col-md-4 col-lg-3 G"><div class="row h-100"><div class="col-md-6 col-lg-6 B h-50 pb-3"><div class="card card-inverse card-success h-100">
<div class="col-md-6 col-lg-6 B h-50 pb-3"><div class="card card-inverse bg-success h-100">
<div class="col-md-12 h-50"><div class="card card-inverse bg-danger h-100">
或者，对于未知数量的子列，使用flexbox，列将填充高度.请参阅 row 上的 d-flex flex-column 和子列上的 h-100.
<div class="row"><div class="col-md-8 col-lg-6 B"><div class="card card-inverse card-primary"><img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="响应式图片">
<div class="col-md-4 col-lg-3 G"><div class="row d-flex flex-column h-100"><div class="col-md-6 col-lg-6 B h-100"><div class="card bg-success h-100">
<div class="col-md-6 col-lg-6 B h-100"><div class="card bg-success h-100">
<div class="col-md-12 h-100"><div class="card bg-danger h-100">
https://www.codeply.com/go/tgzFAH8vaW
I try to have something like this with bootstrap 4
with equal size in the height of green rows and red row
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-6 B"><div class="card card-inverse" style="background-color: #333; border-color: #333;">
<img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image">
</div></div>
<div class="col-md-4 col-lg-3 G">
<div class="row">
<div class="col-md-6 col-lg-6 B"><div class="card card-inverse" style="background-color: #333; border-color: #333;">
<img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image">
</div></div>
<div class="col-md-6 col-lg-6 B"><div class="card card-inverse" style="background-color: #333; border-color: #333;">
<img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image">
</div></div>
<div class="col-md-12"><div class="card card-inverse" style="background-color: #333; border-color: #333;">
<img src="http://lorempicsum.com/rio/800/500/3" class="img-fluid" alt="Responsive image">
</div></div>
</div>
</div>
</div>
</div>
All images have the same size and are responsive
but the problem is I can't get equal size in the height of green rows and red row
解决方案
Use the sizing utility classes...
h-50 = height 50%h-100 = height 100%
http://www.codeply.com/go/Y3nG0io2uE
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-6 B">
<div class="card card-inverse card-primary">
<img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image">
</div>
</div>
<div class="col-md-4 col-lg-3 G">
<div class="row h-100">
<div class="col-md-6 col-lg-6 B h-50 pb-3">
<div class="card card-inverse card-success h-100">
</div>
</div>
<div class="col-md-6 col-lg-6 B h-50 pb-3">
<div class="card card-inverse bg-success h-100">
</div>
</div>
<div class="col-md-12 h-50">
<div class="card card-inverse bg-danger h-100">
</div>
</div>
</div>
</div>
</div>
</div>
Or, for an unknown number of child columns, use flexbox and the cols will fill height. See the d-flex flex-column on the row, and h-100 on the child cols.
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-6 B">
<div class="card card-inverse card-primary">
<img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image">
</div>
</div>
<div class="col-md-4 col-lg-3 G ">
<div class="row d-flex flex-column h-100">
<div class="col-md-6 col-lg-6 B h-100">
<div class="card bg-success h-100">
</div>
</div>
<div class="col-md-6 col-lg-6 B h-100">
<div class="card bg-success h-100">
</div>
</div>
<div class="col-md-12 h-100">
<div class="card bg-danger h-100">
</div>
</div>
</div>
</div>
</div>
</div>
https://www.codeply.com/go/tgzFAH8vaW
这篇关于引导程序 4 行高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
