Bootstrap 下拉菜单和组中的按钮答案

【问题标题】：Bootstrap drop-down and button in groupBootstrap 下拉菜单和组中的按钮
【发布时间】：2018-06-03 21:49:59
【问题描述】：

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

补充：我的组合框可能会改变它们的大小，我想在所有角落使用引导程序中的圆角。

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

【问题讨论】：

标签： html css twitter-bootstrap drop-down-menu buttongroup

【解决方案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>

【讨论】：

我对这个解决方案的问题是，在我的问题中，下拉菜单可能会改变它们的大小。
@floriegl 是的，你知道内容，对吧？所以你可以调整媒体查询
内容是从我无法控制元素长度的数据库中加载的。
@floriegl 好的，我明白了。因此，如果我考虑我的代码..您希望媒体查询的值根据内容进行调整？
是的，我可能会歪曲我的问题的另一点是我想对元素使用引导设计（见图）。

【解决方案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>

如果您想使用引导程序创建下拉菜单，请尝试此代码格式。还添加了按钮的 bootstrap sn-p。

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

【讨论】：