在下拉列表旁边添加图标后如何保持宽度 [英] How to maintain the width after adding icon next to dropdown list

查看：24
本文介绍了在下拉列表旁边添加图标后如何保持宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

根据我的代码，有什么方法可以使下拉列表与其他输入字段对齐?

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

<div class="form-horizo​​ntal"><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 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 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()" class="form-control"><option value="">选择一个...</option></选择><a href='#'><i class="material-icons" style="vertical-align: middle;">help</i></a>

</表单>

解决方案

你可能最好使用 输入组 由引导程序提供.

HTML

<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()" class="form-control"><option value="">选择一个...</option></选择><span class="input-group-addon"><a href='#' ><i class="material-icons" style="vertical-align: middle;">help</i></a></span>

然后调整 input-group-addon 样式以删除默认的灰色"

CSS

.input-group-addon {填充:0 6px；颜色:继承；背景色:透明；边界:无；}

JSFIDDLE

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>

解决方案

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

这篇关于在下拉列表旁边添加图标后如何保持宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆