Question

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

我需要在下拉列表旁边添加一个图标。但是，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>

Answer 1

您可能最好使用bootstrap提供的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样式以删除＆＃34;灰色＆＃34;默认

<强> CSS

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

<强> JSFIDDLE

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

1 个答案: