创建文本并选择水平下拉列表

Question

我正在尝试制作像标签这样的文字并在同一行中选择下拉列表。 当display: inline用于div时，它可以正常工作。但是当我在select中使用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。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以在容器上使用flex使它的后代成为flex-items，align-items: center使它们居中，并在标签上设置margin-right以使它之间有一个很好的间距和select元素。

.input-container {
  display: flex;
  align-items: center;
}

.input-label {
  margin-right: 10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-md-2 input-container">
  <label class="input-label">test</label>
  <select class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>

Answer 3

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

因此，您可以将这两个<div>包装在.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>

Answer 4

<div class="form-horizontal">
<label>Country</label>
<select>
<option>Nepal</option>
<option>India</option>
<option>China</option>
</select>

注意：form-horizo​​ntal类的bootstrap将保持在同一行。