【发布时间】：2015-06-18 18:48:47
【问题描述】：
我试图弄清楚如何使我的列的一部分与列中的其他部分具有相同的高度。一张图片来澄清：
从数据中我还有另一列。整页是这样的：
我的 html 看起来像这样：
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="contacts">
<h2>Business Contacts</h2>
<div class="infomation">
<div class="col-md-6">
<h3>Industry</h3>
<div class="name">Joris<br> <span>Vuerstaek</span></div>
<div class="mail"><a href="mailto:joris.v@vkgroup.be">joris.v@vkgroup.be</a></div>
</div>
<div class="col-md-6">
<h3>Public Space</h3>
<div class="name">Wouter<br> <span>Verhaegen</span></div>
<div class="mail"><a href="mailto:wouter.v@vkgroup.be">wouter.v@vkgroup.be</a></div>
</div>
<div class="col-md-6">
<h3>Buildings</h3>
<div class="name">Dirk<br> <span>Slabbinck</span></div>
<div class="mail"><a href="mailto:dirk.s@vkgroup.be">dirk.s@vkgroup.be</a></div>
</div>
<div class="col-md-6">
<h3>Healthcare</h3>
<div class="name">Kenneth<br> <span>Groosman</span></div>
<div class="mail"><a href="mailto:kenneth.g@vkgroup.be">kenneth.g@vkgroup.be</a></div>
</div>
</div>
</div>
</div>
<div class="col-md-7">
<div class="addresses">
<h2>Belgium</h2>
<div class="col-xs-6 col-md-4">
<div class="information">
<div class="address">
Itech Incubator 2<br>
rue Auguste Piccard 48<br>
B - 6041 Charleroi
</div>
<div class="numbers">
<span>T</span> +32 71 15 91 30<br>
<span>E</span> <a href="mailto:valerie.t@vkgroup.be">valerie.t@vkgroup.be</a>
</div>
<a href="#" class="direction">Directions</a>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="information">
<div class="address">
Brugsesteenweg 210<br>
B - 8800 Roeselare
</div>
<div class="numbers">
<span>T</span> +32 51 26 20 20<br> <span>F</span> +32 51 26 20 21<br>
<span>E</span> <a href="mailto:roeselare@vkgroup.be">roeselare@vkgroup.be</a>
</div>
<a href="#" class="direction">Directions</a>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="information">
<div class="address">
Europa Building<br>
Avenue Clemenceau 87<br>
B - 1070 Brussels
</div>
<div class="numbers">
<span>T</span> +32 2 414 07 77<br>
<span>F</span> +32 2 414 04 98<br>
<span>E</span> <a href="mailto:bxl@vkgroup.be">bxl@vkgroup.be</a>
</div>
<a href="#" class="direction">Directions</a>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="information">
<div class="address">
Axxes Business Park<br>
Guldensporenpark<br>
Building A - n° 4<br>
B - 9820 Merelbeke
</div>
<div class="numbers">
<span>T</span> +32 9 210 31 50<br>
<span>F</span> +32 9 210 31 59<br>
<span>E</span>
<a href="mailto:gent@vkgroup.be">gent@vkgroup.be</a>
</div>
<a href="#" class="direction">Directions</a>
</div>
</div>
</div>
<div class="addresses">
<h2>Vietnam</h2>
<div class="col-xs-6 col-md-4">
<div class="information">
<div class="address">
Pullman Hanoi, C21, Level 5<br>
40 Cat Linh, Dong Da District<br>
Hanoi
</div>
<div class="numbers">
<span>T</span> +84 4 3736 9097<br> <span>E</span> <a href="mailto:vietnam@vkgroup.be">vietnam@vkgroup.be</a>
</div>
<a href="#" class="direction">Directions</a>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="information">
<div class="address">
Harbour View Tower, Level 13<br>
35 Nguyen Hue, District 1<br>
Ho Chi Minh City
</div>
<div class="numbers">
<span>T</span> +84 8 3512 2051<br>
<span>E</span>
<a href="mailto:vietnam@vkgroup.be">vietnam@vkgroup.be</a>
</div>
<a href="#" class="direction">Directions</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
我所做的是给我的 div 类地址一个 104px 的固定高度。但问题在于地址超过 104px 的第二部分。我怎样才能轻松解决这个问题？
【问题讨论】：
-
固定高度不是一个好主意。相反，使用 Bootstrap 的列重置 (getbootstrap.com/css/#grid-responsive-resets) 或简单地嵌套行。
-
我刚刚注意到您已经在嵌套列，但您没有在中间使用所需的行。这可能会有所帮助。
-
所需行是什么意思？我不认为这会对身高有任何影响吗？
标签： jquery html css twitter-bootstrap multiple-columns