为什么我有一个列依赖于另一个使用Bootstrap 4的列

Question

我的web应用程序有问题。

说明：左侧显示的文本越长(因此是另一列(，图像就越大。那么，如何使一个列与另一个列完全独立呢？

<section class="section">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-4 col-xs-4 p-4">
<h1>nosfera.app</h1>
<p>Oops, I think you got lost in the humble abode of Nosfera.
<p>But don't worry ! We will take care of you, you will be treated like a king, and soon everyone will
notice you, but for that, you have to join the dark side by clicking one of the two little buttons
below.
<div class=fields>
<div class=item><a href=/login><button class="btn btn-red">Log in</button></a></div>
<div class=item><a href=/login><button class="btn btn-grey ml-2">Register</button></a></div>
</div>
</div>
<div class="col-md-6 col-xs-4 col-sm-4">
<div class="block"></div>
</div>
</div>
</div>
</section>
.section {
display: grid;
height: 90vh;
align-content: center;
}
.section p {
font-weight: 400;
font-size: 1.2rem;
}
.block {
background:url(../img/block.png);
background-size:contain;
background-repeat:no-repeat;
background-position:center;
width:100%;
height:100%
}

演示

Answer 1

您正在.block元素CSS上应用height:100%。它将随着文本的增长而增长。只要设置一个固定的大小(例如100px(，或者限制max-height，它就会停止增长