引导具有相同高度的列

Question

我在使用 Bootstrap 的页面中有 2 列，但其中一列比另一列大。我想要做的是让两列的高度相同，这样我就可以在底部对齐较短列的内容。

我读过一些方法，例如 margins、flexbox 和 tables。

我尝试了flexbox，它适用于更大的屏幕尺寸，但是当我使用移动尺寸时，列不会像以前那样堆叠在一起，因为我在它们上添加了 flexbox 样式。我还没有尝试过边距，因为它对我来说有点 hacky。表格 - 我不知道，我只是一般不喜欢使用表格进行布局。

如果你想试一试，这里是Fiddle。

HTML

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="col-md-12">
        <h4 class="search-header bold">Deadline</h4>
        <div class="form-group">
          <label for="select-deadline" class="control-label">Deadline Type</label>
          <select name="deadline" id="select-deadline" class="form-control">
            <option value="">Upcoming</option>
            <option value="" selected="selected">Sponsor</option>
            <option value="">Internal</option>
          </select>
        </div>
        <div class="form-group">
          <label for="input-days" class="control-label">Due Within How Many Days?</label>
          <input type="text" class="form-control" id="input-days" />
        </div>
        <div class="divider bold italic"><span class="divider-line">&mdash;</span> or <span class="divider-line">&mdash;</span></div>
        <div class="form-group">
          <label for="input-date" class="control-label">Last Day to Search</label>
          <input type="text" class="form-control" id="input-date" />
        </div>
      </div>
    </div>
    <div class="col-md-8">
      <div class="col-md-12 action-btn-container">
        <button type="button" class="btn btn-default btn-action">Clear All</button>
        <button type="button" class="btn btn-default btn-action">Search</button>
      </div>
    </div>
  </div>
</div>

CSS

.action-btn-container {
  text-align: right;
}

更新：

这是一个Fiddle，我尝试使用flexbox 解决问题。

Answer 1

我尝试了 flexbox，它适用于更大的屏幕尺寸，但是当我使用移动设备尺寸时，列并没有像我在它们上添加 flexbox 样式之前那样堆叠。

弹性容器的初始设置是flex-wrap: nowrap。

这意味着，默认情况下，无论屏幕大小如何，子元素（“flex items”）都将被强制保留在一行中。

如果您希望列在较小的屏幕上垂直堆叠，请将其添加到容器中：

flex-wrap: wrap