我要使带有红色边框的div与右边的绿色对应的高度相同?这是引导程序4!
尝试显示:flex和flex-grow,还尝试将边框放在列上(这使我想要的效果),但是它没有填充。
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="container-fluid">
<div class="row">
<div class="col-12 col-lg-6 order-lg-1">
<div class="border border-lg border-success p-3 p-md-4 p-lg-5 text-xlarge font-weight-medium">This is an example sentence. It may go on for a couple of lines just to see what's going to happen!</div>
</div>
<div class="col-12 col-lg-6 order-lg-3">
<div class="text-xlarge text-success mt-2"><i class="icon icon-md line-height-1">check</i> Correct</div>
<p class="mb-3 mb-lg-0 text-large">Write a short explanation here</p>
</div>
<div class="col-12 col-lg-6 order-lg-2">
<div class="border border-lg border-danger p-3 p-md-4 p-lg-5 text-xlarge font-weight-medium">This is an example sentence.</div>
</div>
<div class="col-12 col-lg-6 order-lg-4">
<div class="text-xlarge text-danger mt-2"><i class="icon icon-md line-height-1">close</i> Incorrect</div>
<p class="mb-3 mb-lg-0 text-large">Write a short explanation here</p>
</div>
</div>
</div>
这是一支现有的笔:https://codepen.io/Daggett/pen/OKJxPm
这些列也具有响应性,需要在较小的断点处堆叠(因此,order-lg类)
答案 0 :(得分:4)
将d-flex
添加到列中以使用默认的拉伸行为并具有相同的高度。另外,将w-100
添加到元素中以保持其默认全宽:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="container-fluid">
<div class="row">
<div class="col-12 col-lg-6 order-lg-1 d-flex">
<div class="border border-lg border-success p-3 p-md-4 p-lg-5 text-xlarge font-weight-medium w-100">This is an example sentence. It may go on for a couple of lines just to see what's going to happen!</div>
</div>
<div class="col-12 col-lg-6 order-lg-3">
<div class="text-xlarge text-success mt-2"><i class="icon icon-md line-height-1">check</i> Correct</div>
<p class="mb-3 mb-lg-0 text-large">Write a short explanation here</p>
</div>
<div class="col-12 col-lg-6 order-lg-2 d-flex">
<div class="border border-lg border-danger p-3 p-md-4 p-lg-5 text-xlarge font-weight-medium w-100">This is an example sentence.</div>
</div>
<div class="col-12 col-lg-6 order-lg-4">
<div class="text-xlarge text-danger mt-2"><i class="icon icon-md line-height-1">close</i> Incorrect</div>
<p class="mb-3 mb-lg-0 text-large">Write a short explanation here</p>
</div>
</div>
</div>
答案 1 :(得分:0)
引导程序4行和元素通过其flex设计已经具有相同的高度。您只需将内部div的高度设置为100%,即可填充其父级空间。
您可以将Bootstrap 4 h-100
类用于height:100%;
。
<div class="container-fluid">
<div class="row">
<div class="col-12 col-lg-6 order-lg-1">
<div class="border border-lg border-success p-3 p-md-4 p-lg-5 text-xlarge font-weight-medium">This is an example sentence. <br> It may go on for a couple of lines just to see what's going to happen!</div>
</div>
<div class="col-12 col-lg-6 order-lg-3">
<div class="text-xlarge text-success mt-2"><i class="icon icon-md line-height-1">check</i> Correct</div>
<p class="mb-3 mb-lg-0 text-large">Write a short explanation here</p>
</div>
<div class="col-12 col-lg-6 order-lg-2">
<div class="h-100 border border-lg border-danger p-3 p-md-4 p-lg-5 text-xlarge font-weight-medium">This is an example sentence.</div>
</div>
<div class="col-12 col-lg-6 order-lg-4">
<div class="text-xlarge text-danger mt-2"><i class="icon icon-md line-height-1">close</i> Incorrect</div>
<p class="mb-3 mb-lg-0 text-large">Write a short explanation here</p>
</div>
</div>