Bootsrap 3：bootstrap-select和input-group-addon

Question

我有两个输入组放入表单组。第一个有三个组插件，一切看起来都正确。第二个带bootstrap-select的插件有两个插件，一个在左边，第二个在右边，这导致bootstrap-select有圆角，虽然它放在两个插件之间。此外，如果我只留下一个插件就可以了。

<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-select失败。它将<button>放入<div>。 <div>有form-control个类，但其颜色是透明的，<button>没有form-control类，负责border-radius管理。即使我使用jQuery将form-control类添加到<button>，按钮也是<div>中的第一个元素，因此左侧有圆角，右侧有正方形:)解决方案是{{ 1}}。

Answer 2

我的symilar代码有效。您应该尝试使用remome form-group块或在select旁边添加一些空的select元素，并通过文档就绪的js将其删除。

我的代码：

<div class="container"><div class="col-md-2">
<div class="input-group"><a href="keyboard-new"><span class="btn btn-primary">Nowy</span></a></div></div>           
    <div class="col-md-4">
    <div class="input-group"> 
    <span class="input-group-addon">
          lalalalala
        </span>
    <select id="searchcolumn" class="form-control">
    <option value="NAZWA">Nazwa</option>
    </select> 
     <span class="input-group-addon">
          lalalalala
        </span>
       </div>
    </div>
</div>

看起来正确：