javascript - 如何将 Bootstrap 输入组中的字段与 IE 中的颜色选择器插件水平对齐？

Question

我使用 bootstrap 来显示颜色选择器和一个与颜色选择相关的复选框。要求是在一行中显示元素:首先在内部选择颜色的正方形；然后是复选框，然后是标签，所有相同高度的元素都在一条水平线上。

<div class="form-group input-group">
    @Html.LabelFor(m => m.Color)
    <div class="input-group" id="color-picker-container" align="left">
        <span class="input-group-addon"><i></i></span>
            @Html.TextBoxFor(m => m.Color, new { @class = "form-control", id = "color-picker" })
            @Html.CheckBoxFor(m => m.IsNew, new { id = "is-new" })
            @Html.LabelFor(m => m.IsNew)
   </div>
</div>

我在 Firefox/Chrome 中获得了所需的布局，但在 IE 中图片失真:所选颜色显示在双倍高度的矩形中；在矩形右侧的一行中有一个文本框，在其下方的第二行中有一个带有标签的复选框(两行合并后的高度与具有所选颜色的矩形相同)。

为了使所有元素在 IE 中都在一行中，与其他浏览器类似，应该更改什么？

更新:我们的逻辑是尽可能使用最新的 IE 版本，因此使用 IE 11。

Answer 1

也许，这对其他人有用。颜色选择器的 style = "display:inline"成功了，因为它覆盖了用于输入组类的 display:table 样式。

<div class="form-group input-group">
@Html.LabelFor(m => m.Color)
<div class="input-group" id="color-picker-container" align="left">
    <span class="input-group-addon"><i></i></span>
        @Html.TextBoxFor(m => m.Color, new { @class = "form-control", id = "color-picker", style = "display:inline" })
        @Html.CheckBoxFor(m => m.IsNew, new { id = "is-new" })
        @Html.LabelFor(m => m.IsNew)

,