引导具有相同高度的列

Posted 2023-03-06

【中文标题】引导具有相同高度的列

【英文标题】：Bootstrap to have columns with same height

【发布时间】：2017-02-08 05:16:54

【问题描述】：

我在使用 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 解决问题。

【参考方案1】：

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

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

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

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

flex-wrap: wrap

【讨论】：

这是我更新的Fiddle 和flexbox 样式。为什么较短的列似乎不尊重小屏幕中的 4-8 比例？

因为.flex-col flex: 1; 应用于两列。该规则告诉他们在他们之间平均分配空间。当您删除它时，Bootstrap 宽度将恢复：jsfiddle.net/m8skcbj5/5

哦，我明白了，谢谢！我只是从我之前阅读的问题中复制了它。不知道它有什么作用，所以我没有删除它。

嘿@Michael_B，flexbox 使列的行为有所不同。当它们堆叠时，它们不再占用整个宽度，而是仅堆叠但保持当前的宽度。你可以比较这个 Fiddle 这是我想要的行为和你的 Fiddle 与使用 flexbox 的高度相等。

好吧，你遇到了 Bootstrap 样式。您需要覆盖它们。这是使用媒体查询的示例：jsfiddle.net/m8skcbj5/9