Bootstrap下拉列表和组中的按钮

Question

我想让下面的代码看起来像Bootstrap 3.3的图像。当没有足够的空间在一行中显示所有元素时，它们应该形成一个垂直组，其中元素使用整个屏幕宽度。

另外：我的组合框可能会改变它们的尺寸，我想在各个角落使用自举的圆角。

image

<div>
  <select>
    <option>Opt1</option>
    <option>Opt2</option>
  </select>
  <select>
    <option>Opt1</option>
    <option>Opt2</option>
  </select>
  <button>Button</button>
</div>

Answer 1

您可以简单地考虑媒体查询。这是一个例子：

div {
 text-align:center;
}
select,
button {
  max-width: 120px;
  width: 100%;
}

@media all and (max-width:420px) {
  select,
  button {
    max-width:100%;
    display: block;
  }
}

<div>
  <select>
    <option>Opt1</option>
    <option>Opt2</option>
  </select>
  <select>
    <option>Opt1</option>
    <option>Opt2</option>
  </select>
  <button>Button</button>
</div>

Answer 2

 <div>
    <select class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <option><li><a href="#">Action</a></li></option>
        <option><li><a href="#">Another action</a></li></option>
        <option><li><a href="#">Something else here</a></li></option>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </select>
<button class="btn btn-primary butn">
Button
  </button>
</div>

如果要使用引导程序创建下拉菜单，请尝试使用此代码格式。还添加了用于按钮的引导片段。

  <div>
    <select class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <option><li><a href="#">Action</a></li></option>
        <option><li><a href="#">Another action</a></li></option>
        <option><li><a href="#">Something else here</a></li></option>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </select>
<button class="btn btn-primary butn">
Button
  </button>
</div>