我使用Bootstrap在页面中有2列，但是一列比另一列大。我想要做的是让两个列的高度相同，以便我可以对齐底部较短列的内容。
我已经阅读了一些方法，例如flexbox，tables和flexbox。
我尝试<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">—</span> or <span class="divider-line">—</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>
并且它适用于更大的屏幕尺寸但是当我转到移动尺寸时，在我添加flexbox样式之前，列不会像以前那样堆叠。我还没有尝试过的利润，因为对我来说感觉有些笨拙。表 - 我不知道，我只是不喜欢使用表格进行布局。
如果你想刺戳它，可以Fiddle。
.action-btn-container {
text-align: right;
}
flexbox以下是Fiddle我尝试使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('[class^="person"],[class*="john"]').css('color','red')
});
</script>
<div class="person-john-doe">John Doe</div>
<div class="person-peter-pan">Peter Pan</div>
解决问题的方法。
答案 0 :(得分：2)
我尝试过flexbox，它适用于更大的屏幕尺寸，但是当我使用移动尺寸时，在我添加Flexbox样式之前，列不会像以前那样堆叠。
弹性容器的初始设置为flex-wrap: nowrap。
这意味着，默认情况下，无论屏幕大小如何，子元素（＆＃34; flex项目＆＃34;）都将被强制保留在一行中。
如果希望列在较小的屏幕上垂直堆叠，请将其添加到容器中：
flex-wrap: wrap