使列的高度相等

Question

我正在研究使用 Bootstrap 3 制作的 2 列。我们目前无法更改为 Bootstrap 4，因为我们有一个拥有超过 100.000 种产品的网上商店。所以这是一个未来的项目，因为我们现在没有时间。因此，使用 Bootstrap 4 解决以下问题的解决方案现在不是一个选项。

目前我正在使用Bootstrap 3。我遇到了一些问题，使我的列高度相等。右边比左边小。

有没有人知道一个好的解决方案，所以列具有相同的高度 - 即使视口正在改变？视口何时移动并不重要。

这里有一个JSFiddle

.row [class*="col-"] {
padding-right: 7.5px;
padding-left: 7.5px;
}
.padding-twocolumn-bg {
margin-bottom:30px;
}
.business-left-img a img { 
width: auto; 
margin:auto 
}
.business-left {
padding:75px 75px 40px 75px;
}
.classWithPad { 
margin:8px; 
padding:10px; 
background-color: #fff; 
border:1px solid #ebecf0;
}

<div class="wrapper">
<!-- Section 7 -->
<div class="section padding-twocolumn-bg">
<div class="row">
<div class="text-center col-md-6 business-left-img">
<div class="classWithPad">
<p class="business-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a><img src="https://placehold.it/150x150" class="img-responsive"></a>
<h2>AGA-Tools</h2>
<p>Name - Position</p>
<a href="tel[phone]">[phone]</a>
</div>
</div>
<div class="text-center col-md-6">
<div class="classWithPad">
<div class="row">
<div class="col-sm-12">
<h3 class="sbp-align">Headline</h3>
<hr>
</div>
<div class="col-sm-6">
<a href="#">
<img src="https://placehold.it/250x150" style="padding:10px;">
</a>
<h4 class="sbp-align">Subline</h4>
<p class="sbp-align">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr id="sbp-hr">
<a href="#">Ansøg nu</a>
</div>
<div class="col-sm-6">
<img src="https://placehold.it/250x150" style="padding:10px;">
<h4 class="sbp-align">Subline</h4>
<p class="sbp-align">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr id="sbp-hr">
<a href="#">Read more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

.row [class*="col-"] {
padding-right: 7.5px;
padding-left: 7.5px;
}
.padding-twocolumn-bg {
margin-bottom:30px;
}
.business-left-img a img { 
width: auto; 
margin:auto 
}
.business-left {
padding:75px 75px 40px 75px;
}
.classWithPad { 
margin:8px; 
padding:10px; 
background-color: #fff; 
border:1px solid #ebecf0;

height: 100%;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />

<div class="wrapper">
<!-- Section 7 -->
<div class="section padding-twocolumn-bg">
<div class="row">
<div class="text-center col-md-6 business-left-img">
<div class="classWithPad">
<p class="business-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a><img src="https://placehold.it/150x150" class="img-responsive"></a>
<h2>AGA-Tools</h2>
<p>Name - Position</p>
<a href="tel[phone]">[phone]</a>
</div>
</div>
<div class="text-center col-md-6">
<div class="classWithPad">
<div class="row">
<div class="col-sm-12">
<h3 class="sbp-align">Headline</h3>
<hr>
</div>
<div class="col-sm-6">
<a href="#">
<img src="https://placehold.it/250x150" style="padding:10px;">
</a>
<h4 class="sbp-align">Subline</h4>
<p class="sbp-align">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr id="sbp-hr">
<a href="#">Ansøg nu</a>
</div>
<div class="col-sm-6">
<img src="https://placehold.it/250x150" style="padding:10px;">
<h4 class="sbp-align">Subline</h4>
<p class="sbp-align">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr id="sbp-hr">
<a href="#">Read more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

您可以添加

.classWithPad {
height: 100%;
}

或

.business-left {
padding: 37px 75px 40px 75px;
}

你可以通过许多不同的方式做到这一点，通过玩填充和边距，但我认为hieght: 100%是正确的方法。