如何在Bootstrap中使div保持对齐

Question

我正在使用Bootstrap布局我的页面。 在特定的屏幕宽度下，由于其中一个

的标题很长并占用另一行，所以

变得不对齐。

如果旁边的

也有一个很长的标题（因此两个都占据了2行），那么

将被正确对齐。

我应该如何配置这些

，以便无论标题是非常长还是短，这些

仍然会对齐，即对于这个屏幕宽度，我应该看到两个

并排而不是看到第三个

移到右侧，第四个

移到下一行？ <强>代码

<div class="container">
    <div class="row">
    forloop {
        <div class="col-md-3 col-xs-6" style="margin-bottom: 25px">
            <img>
            <h3>
        </div>
    }
    </div>
</div>

- iPhoneJavaDev

Answer 1

有两个选项：

• 您可以在每三个项目处使用clear:left。

.row > div:nth-of-type(2n+1) {
  clear: left
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-3 col-xs-6">
      <img class="img-responsive" src="//placehold.it/300x300" />
      <h3>Very big text here to make 2 lines</h3>
    </div>
    <div class="col-md-3 col-xs-6">
      <img class="img-responsive"src="//placehold.it/300x300" />
      <h3>text here</h3>
    </div>
    <div class="col-md-3 col-xs-6">
      <img class="img-responsive"src="//placehold.it/300x300" />
      <h3>text here</h3>
    </div>
    <div class="col-md-3 col-xs-6">
      <img class="img-responsive" src="//placehold.it/300x300" />
      <h3>text here</h3>
    </div>
  </div>
</div>

• 您可以在xs上使用clearfix bootstrap类

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-3 col-xs-6">
      <img class="img-responsive" src="//placehold.it/300x300" />
      <h3>Very big text here to make 2 lines</h3>
    </div>
    <div class="col-md-3 col-xs-6">
      <img class="img-responsive" src="//placehold.it/300x300" />
      <h3>text here</h3>
    </div>
    <div class="clearfix visible-xs-block"></div>
    <div class="col-md-3 col-xs-6">
      <img class="img-responsive" src="//placehold.it/300x300" />
      <h3>text here</h3>
    </div>
    <div class="col-md-3 col-xs-6">
      <img class="img-responsive" src="//placehold.it/300x300" />
      <h3>text here</h3>
    </div>
  </div>
</div>

- dippas

Answer 2

如果你知道标题最多只有两行文字，你可以为 <h3> 设置固定的高度。

例如：

h3{display:block;line-height:16px;height:32px;}

但是@dippas的建议可能更好。

- Django