在窗体的底部选择<select>

Question

我尝试了bootstrap 4的flexbox align实用程序的所有组合，但都无法从他们的文档中获得。

是否可以通过以下方式确保第二个<select>与row的底部对齐？

<div class="container mt-5">
    <div class="row">
        <div class="col-md-6">
            <label for="validationCustom01">Choose one. Here we have a long label which causes a linebreak and the select element to be lower down as a result.</label>
            <select class="form-control" id="validationCustom01">
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
           </select>
        </div>

        <div class="col-md-6">
            <label for="validationCustom02">Choose one</label>
            <select class="form-control" id="validationCustom02">
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
            </select>
        </div>
     </div>
</div>

请注意，由于第一个元素上的标签较长，因此下拉列表无法对齐。这显然是一种响应行为，因此固定高度或宽度不是我们想要做的。理想的行为是在所有屏幕宽度上，两个<select>元素都水平对齐。

一个代码笔示例：https://codepen.io/cpj22/pen/eYOZPLQ

Answer 1

您可以将选择元素绝对定位到底部，并在换行时将其重置为相对位置。

from functools import reduce
import operator
from django.db.models import Q

def get_articles_with_words_in_titles(self, long_words):
result = {}
    q_list = [Q(title__icontains=word) for word in long_words]
    qset = Article.objects.filter(reduce(operator.or_, q_list)
    result.extend( qset )
    return result

#validationCustom02 {
  position: absolute;
  bottom: 0px;
}

@media (max-width: 767px) {
  #validationCustom02 {
    position: relative;
  }
}