制作文本并选择水平下拉菜单

Question

我正在尝试制作类似标签的文本，并在同一行中选择下拉菜单。当我同时使用display: inline这两个divs 时它有效。但是当我在选择中使用form-control类时它会中断。这是例子

这是代码

<div class="col-md-2">
  <div> <span>test</span></div>

  <div>
    <select class="form-control" id="sel1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select>
  </div>
</div>

我想把它放在同一条线上。

Answer 1

添加display: flex为容器。

.flex {
  /* become a flex container */
  /* its children will be flex-items */
  display: flex;
  /* align items on font's baseline */
  align-items: baseline;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-md-2 flex">
  <div><span>test</span></div>

  <div>
    <select class="form-control" id="sel1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select>
  </div>
</div>

Answer 2

当您使用 Bootstrap 时，始终以 Bootstrap 的方式思考：我的意思是使用它的网格布局哲学。

因此，您可以将这 2 个<div>包裹在 a 中.row，然后根据所需的可用断点使用所需的预定义列。此过程应该可以解决您的问题：

<div class="row">
    <div class="col-your_break_point_unit">
        <!-- your text here -->
    </div>
    <div class="col-your_break_point_unit">
        <select>
            <!-- your select options here -->
        </select>
    </div>
</div>