twitter-bootstrap - Bootstrap 3 : bootstrap-select and input-group-addon

Question

我将两个输入组放入表单组中。第一个有三个组插件，一切看起来都不错。第二个带有 bootstrap-select 的有两个插件，一个在左边，第二个在右边，这导致 bootstrap-select 有圆 Angular ，尽管它被放置在两个插件之间。此外，如果我只留下一个插件，它看起来还不错。

<div class="form-group">
    <div class="input-group" id="dateOfBirthDiv">
        <span class="input-group-addon">
            @Html.Label("Data urodzenia")
        </span>
        @Html.TextBox("dateOfBirth", null, new { @class = "form-control" })
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-th"></span>
        </span>
        <span class="input-group-addon" style="min-width: 42px;">
        </span>
    </div>
</div>

<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">
            @Html.Label("Płeć")
        </span>
        @Html.DropDownList("patientSex", new SelectList(SelectListHelpers.sexSelectListHelper, "Value", "Text"), "-- wybierz --", new { @class = "selectpicker form-control" })
        <span class="input-group-addon" style="min-width: 42px;">
        </span>
    </div>
</div>

代码是Razor 语法，但我想每个人都会明白DropDownList 改为<select> .然后 bootstrap-select 以它的方式改变它。

我认为它可能是这样的，因为它被 bootstrap-select 隐藏了，但为什么它与一个插件一起工作？有没有人遇到过类似的问题？

Answer 1

这是 Bootstrap 选择失败。它把<button>在 <div> . <div>有form-control类，但它的颜色是透明的，<button>没有form-control负责border-radius的类管理。即使我添加 form-control类别为 <button>使用 jQuery，按钮是 <div> 中的第一个元素所以它的左边是圆 Angular ，右边是方形 :) 解决方案是 $('#patientSex').next('div.bootstrap-select').children('button.dropdown-toggle').css('border-radius', '0px'); .