是否可以在引导按钮组的选择框中进行分组？

Question

我想在这样的按钮组中的选择框中进行分组。

但它会像这样结束。

这是我试过的HTML。

<div class="btn-group" role="group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="asc"> asc
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="desc">desc
  </label>
  <div class="btn">
    <select class="form-control">
      <option>1</option>
    </select>
  </div>
</div>

如何制作这样的按钮组？

小提琴

我在jsfiddle中创建了一个例子 http://jsfiddle.net/fe26/uv020gdq/1/

Answer 1

我认为这里的问题是使用btn类填充包装div。我设法通过将btn类直接分配给select：

来更接近您的示例

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" role="group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="asc"> asc
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="desc">desc
  </label>
    <select class="btn" style="border: 2px solid #ccc; border-left: none;">
      <option>1</option>
    </select>
</div>

编辑：您可以使用引导程序附带的图标来显示向上/向下箭头。当用户点击箭头时，您需要使用javascript来更改组件的值。我不推荐这样的设置，因为几乎不可能在移动设备上使用向上/向下控制。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" role="group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="asc"> asc
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="desc">desc
  </label>
  <div class="btn" style="border-top: 2px solid #ccc; border-bottom: 2px solid #ccc;">
       1
  </div>
  <div class="control" style="display: inline-block; line-height: 1rem; padding: 0.2rem; border: 2px solid #ccc; border-left: none">
      <span class="glyphicon glyphicon-triangle-top"></span><br />
      <span class="glyphicon glyphicon-triangle-bottom"></span>
  </div>
</div>