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中的所有元素都在一行中，应该改变什么，与其他浏览器类似？

UPDATE ：我们有逻辑可以使用最新的IE版本，因此使用IE 11。

Answer 1

可能，这对其他人有用。 style =“display：inline”用于颜色选择器的功能，因为它覆盖了显示：表格样式，用于输入组类。

<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)

，

如何将Bootstrap输入组中的水平字段与IE中的colorpicker插件对齐？

1 个答案: