How to maintain the width after adding icon next to dropdown list

问题

Based on my code, is there any way to make the dropdown list align with the other input fields?

I need to add an icon right next to the dropdown list. However, class="form-control" should be 100% width by default but it doesn't after I added the icon.

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

回答1:

You're probably best making use of Input Groups provided by bootstrap.

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>

Then adjust the input-group-addon styling to remove the "grey" that comes default

CSS

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

JSFIDDLE

来源：https://stackoverflow.com/questions/41687259/how-to-maintain-the-width-after-adding-icon-next-to-dropdown-list

标签

html

css

twitter-bootstrap