在下拉列表旁边添加图标后如何保持宽度答案

【问题标题】：How to maintain the width after adding icon next to dropdown list在下拉列表旁边添加图标后如何保持宽度
【发布时间】：2017-01-25 15:50:18
【问题描述】：

根据我的代码，有没有办法让下拉列表与其他输入字段对齐？

我需要在下拉列表旁边添加一个图标。但是，class="form-control" 默认应该是 100% 的宽度，但是我添加了图标之后就没有了。

<form asp-action="Apply" asp-controller="Jobs">
<div class="form-horizontal">
    <div class="form-group">
        <label asp-for="Name" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input asp-for="Name" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label asp-for="YearsAttended" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input asp-for="YearsAttended" class="form-control" min="0" value="0"/>
        </div>
    </div>
    <div class="form-group">
        <label asp-for="HighestQualification" class="col-md-2 control-label"></label>
        <div class="col-md-10 form-inline">
            <select asp-for="HighestQualification" asp-items="Html.GetEnumSelectList<QualificationLevel>()" class="form-control">
                <option value="">Choose one...</option>
            </select>
            <a href='#'><i class="material-icons" style="vertical-align: middle;">help</i></a>
        </div>
    </div>
</div>
</form>

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

您可能最好使用引导程序提供的Input Groups。

HTML

<div class="form-group">
    <label asp-for="HighestQualification" class="col-md-2 control-label"></label>
    <div class="col-md-10">
        <div class="form-inline input-group">
            <select asp-for="HighestQualification" asp-items="Html.GetEnumSelectList<QualificationLevel>()" class="form-control">
                <option value="">Choose one...</option>
            </select>
            <span class="input-group-addon">
                <a href='#' >
                    <i class="material-icons" style="vertical-align: middle;">help</i>
                </a>
            </span>
        </div>
    </div>
</div>

然后调整input-group-addon的样式，去掉默认自带的“灰色”

CSS

.input-group-addon {
    padding: 0 6px;
    color: inherit;
    background-color: transparent;
    border: none;
}

JSFIDDLE

【讨论】：