asp.net - Bootstrap 3输入组不适用于选择元素

Question

我正在尝试使用以下示例代码在 Bootstrap 3 中使用下拉选择器正确设置输入组样式：

<div class="form-group">
  <div class="input-group">
    <span class="input-group-btn">
      <select class="btn">
        <option>USD</option>
        <option>GBP</option>
        <option>ZAR</option>
      </select>
    </span>
    <input type="text" class="form-control">
    <span class="input-group-btn">
      <div class="btn btn-default" type="button">Button</div>
    </span>
  </div>
</div>

它在 Bootply ( http://www.bootply.com/ZVSunDnXif ) 中运行良好：

但是如果我使用完全相同的代码将它放入我的网站（ASP.Net Web Forms），它会中断：

我不太介意（在香草引导程序中，它只是缺少选择框周围的边框），除了我使用的是 Bootswatch 主题版本，它甚至没有正确对齐：

输入组的 css 路径是body > form > div #MainBody > div.row > div.col-md-9 > div.form-group.

如果我删除了选择元素，它会显示得很好，那么我定义它的方式有问题吗？

Answer 1

尝试将行类添加到 select 元素的 form-group div 父级。我的选择元素打破了表单 div 并进入另一行。添加行类使其在视觉上保持在内部，尽管它仍在 html 表单标记之外。我将单独发布。