引导程序 3：引导程序选择和输入组插件答案

【问题标题】：Bootsrap 3: bootstrap-select and input-group-addon引导程序 3：引导程序选择和输入组插件
【发布时间】：2015-07-29 08:18:28
【问题描述】：

我有两个输入组放入表单组。第一个有三个组插件，一切看起来都不错。第二个带有 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 隐藏，但为什么它与一个插件一起工作？有没有人遇到过类似的问题？

【问题讨论】：

这是什么浏览器？ The docs 说Avoid using <select> elements here as they cannot be fully styled in WebKit browsers.。另外我猜你正在使用某种选择框插件来赋予它额外的功能。您是否尝试过删除它并查看会发生什么情况，然后您可以查看它是一般问题还是只是由于插件造成的。
你能在JSFiddle 或CodePen 上重现这个问题吗？如果不在浏览器中的 DevTools 中检查，很难说出这里发生了什么
引导选择失败。它将<button> 放入<div>。 <div> 有form-control 类，但它的颜色是透明的，<button> 没有负责border-radius 管理的form-control 类。即使我使用 jQuery 更新 form-control 类 <button> 按钮也是 <div> 中的第一个元素，所以它的左侧是圆角，右侧是正方形:) 解决方案是 $('#patientSex').next('div.bootstrap-select').children('button.dropdown-toggle').css('border-radius', '0px');

标签： twitter-bootstrap css twitter-bootstrap-3

【解决方案1】：

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

【讨论】：

【解决方案2】：

我的同义代码有效。您应该尝试移除表单组块或在您的选择旁边添加一些空的选择元素，并通过 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>

看起来正确：

【讨论】：