Bootstrap CSS从兄弟div继承高度

Question

我是一个后端人，试图做一些最小的CSS，我正在努力解决这个问题，我有这个HTML代码：

<div class="row">
    <div class="col-md-12">
        <h2 class="text-info">Price Table</h2>
        <select id="pricing-level">
            {% for in_pricing_level in pricing_levels %}
                <option value="{% url 'catalogue:table' product_type in_pricing_level.0 %}" {% if in_pricing_level.0 == pricing_level %}selected{% endif %}>{{ in_pricing_level.1 }}</option>
            {% endfor %}
        </select>
    </div>
</div>

问题： 下拉框被包裹到一个新行，结果是

我尝试过将它们放入2列：

<div class="row">
    <div class="col-md-2" style="border: 1px solid red;">
        <h2 class="text-info">Price Table</h2>
    </div>
    <div class="col-md-2" style="border: 1px solid red;">>
        <select id="pricing-level">
            {% for in_pricing_level in pricing_levels %}
                <option value="{% url 'catalogue:table' product_type in_pricing_level.0 %}" {% if in_pricing_level.0 == pricing_level %}selected{% endif %}>{{ in_pricing_level.1 }}</option>
            {% endfor %}
        </select>
    </div>
</div>

但是这会导致下拉框具有最小高度，并且不能垂直居中对齐＆＃34;价格表＆＃34;

虽然我可以手动输入一些填充/边距，但是有一种内置方式（即没有js）可以使下拉列表继续从＆＃34;价格表＆＃34; DIV？

Answer 1

这是你要找的吗？

<div class="row">
    <div class="col-md-12">
        <h2 class="text-info" style="display:inline-block;">Price Table</h2>
        <select id="pricing-level" >
         {% for in_pricing_level in pricing_levels %}
                <option value="{% url 'catalogue:table' product_type in_pricing_level.0 %}" {% if in_pricing_level.0 == pricing_level %}selected{% endif %}>{{ in_pricing_level.1 }}</option>
            {% endfor %}
        </select>
    </div>
</div>

Answer 2

将“Price Table”div和下拉菜单包装在.col中并使用以下方法垂直对齐：

.retail-menu {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}