html - 使用具有不同高度的 div 的 Bootstrap 列类

Question

我正在使用带有八个文本 div 的 Bootstrap 3 设置一个看似简单的布局，高度几乎相同，但根据屏幕宽度，有些比其他的略高。

我希望它们在桌面上适合三列，在较小的屏幕上缩小为两列。

我尝试过的

• 将每个 div 设置为 col-xs-6 和 col-md-4。但是，在桌面上，div 的大小导致某些“单元格”出现间隙。

• 将每组三个 div 包装在一个 .row 中，这解决了桌面上的问题，但在移动设备上增加了一个新问题。 (见下面的代码)

• 添加可见 md 的 clearfix div，但这并不能解决问题。

如何让以下标记在桌面设备上显示为三列偶数，在移动设备上显示为两列(无间隙)？

<div class="row">
    <div class="col-xs-6 col-md-4">
        <h4><a href="#bond">text text</a></h4>
        <p class="subtitle">Managing Director</p>
    </div>                                
    <div class="col-xs-6 col-md-4">
        <h4><a href="#buffa">text text</a></h4>
        <p class="subtitle">Managing Director</p>
    </div>
    <div class="col-xs-6 col-md-4">
        <h4><a href="#ebert">text text</a></h4>
        <p class="subtitle">Managing Director</p>
    </div>
</div>
<div class="row">
    <div class="col-xs-6 col-md-4">
        <h4><a href="#gale">text text</a></h4>
        <p class="subtitle">Chief Accounting Officer</p>
    </div>
    <div class="col-xs-6 col-md-4">
        <h4><a href="#kleinman">text text</a></h4>
        <p class="subtitle">General Counsel & Managing Director</p>
    </div>
    <div class="col-xs-6 col-md-4">
        <h4><a href="#scarpati">text text</a></h4>
        <p class="subtitle">Chief Compliance Officer</p>
    </div>
</div>
<div class="row">
    <div class="col-xs-6 col-md-4">
        <h4><a href="#selinger">text text</a></h4>
        <p class="subtitle">Managing Director</p>
    </div>
    <div class="col-xs-6 col-md-4">
        <h4><a href="#tareke">text text text</a></h4>
        <p class="subtitle">Managing Director</p>
    </div>
</div>

Answer 1

行类用于创建列组，但并不是真正需要的。您可以摆脱它以获得您想要的外观。

BOOTPLY

HTML:

<div class="col-xs-6 col-md-4">
    <h4><a href="#bond">text text</a></h4>
    <p class="subtitle">Managing Director</p>
</div>                                
<div class="col-xs-6 col-md-4">
    <h4><a href="#buffa">text text</a></h4>
    <p class="subtitle">Managing Director</p>
</div>
<div class="col-xs-6 col-md-4">
    <h4><a href="#ebert">text text</a></h4>
    <p class="subtitle">Managing Director</p>
</div>
<div class="col-xs-6 col-md-4">
    <h4><a href="#gale">text text</a></h4>
    <p class="subtitle">Chief Accounting Officer</p>
</div>
<div class="col-xs-6 col-md-4">
    <h4><a href="#kleinman">text text</a></h4>
    <p class="subtitle">General Counsel &amp; Managing Director</p>
</div>
<div class="col-xs-6 col-md-4">
    <h4><a href="#scarpati">text text</a></h4>
    <p class="subtitle">Chief Compliance Officer</p>
</div>
<div class="col-xs-6 col-md-4">
    <h4><a href="#selinger">text text</a></h4>
    <p class="subtitle">Managing Director</p>
</div>
<div class="col-xs-6 col-md-4">
    <h4><a href="#tareke">text text text</a></h4>
    <p class="subtitle">Managing Director</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-6 col-md-4">
  <h4><a href="#bond">text text</a></h4>
  <p class="subtitle">Managing Director</p>
</div>
<div class="col-xs-6 col-md-4">
  <h4><a href="#buffa">text text</a></h4>
  <p class="subtitle">Managing Director</p>
</div>
<div class="col-xs-6 col-md-4">
  <h4><a href="#ebert">text text</a></h4>
  <p class="subtitle">Managing Director</p>
</div>
<div class="col-xs-6 col-md-4">
  <h4><a href="#gale">text text</a></h4>
  <p class="subtitle">Chief Accounting Officer</p>
</div>
<div class="col-xs-6 col-md-4">
  <h4><a href="#kleinman">text text</a></h4>
  <p class="subtitle">General Counsel &amp; Managing Director</p>
</div>
<div class="col-xs-6 col-md-4">
  <h4><a href="#scarpati">text text</a></h4>
  <p class="subtitle">Chief Compliance Officer</p>
</div>
<div class="col-xs-6 col-md-4">
  <h4><a href="#selinger">text text</a></h4>
  <p class="subtitle">Managing Director</p>
</div>
<div class="col-xs-6 col-md-4">
  <h4><a href="#tareke">text text text</a></h4>
  <p class="subtitle">Managing Director</p>
</div>