使列等高

Question

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

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

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

有个JSFiddle here

.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+4587582106">+45 12 34 56 78</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+4587582106">+45 12 34 56 78</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% 是正确的方法。

使列等高

Make columns equal heights

html

css

twitter-bootstrap

twitter-bootstrap-3