html - Bootstrap 下拉菜单和组中的按钮

Question

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

补充:我的组合框可能会改变其大小，并且我想在所有 Angular 上使用 Bootstrap 中的圆 Angular 。

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>