把search图标靠近文本框使用引导
我使用引导默认文本框采取全列的宽度，我想把search图标结束文本框。
我的代码是这样的：
<div class="container"> <div class="row"> <div class="form-group col-lg-4"> <label class="control-label">Name</label> <input id="txtName" class="form-control input-sm" /> <span class="glyphicon glyphicon-search"></span> </div> <div class="col-lg-4"></div> <div class="col-lg-4"></div> </div> </div> 我不想使用input组。
请build议一个替代方式或替代HTML与CSS。
这里有三种不同的方式来做到这一点：
这是一个在三个小提琴工作演示
validation：
您可以使用本机引导validation状态 （ 无自定义CSS ！）：
<div class="form-group has-feedback"> <label class="control-label" for="inputSuccess2">Name</label> <input type="text" class="form-control" id="inputSuccess2"/> <span class="glyphicon glyphicon-search form-control-feedback"></span> </div>
有关完整的讨论，请参阅我的答案添加自举graphicsinput框
input组：
你可以像这样使用.input-group类：
<div class="input-group"> <input type="text" class="form-control"/> <span class="input-group-addon"> <i class="fa fa-search"></i> </span> </div>
有关完整的讨论，请参阅我的答案将Twitter Bootstrap图标添加到input框
无风格input组：
您仍然可以使用.input-group进行定位，但只是覆盖默认样式，以使两个元素分离。
使用正常的input组，但添加类input-group-unstyled ：
<div class="input-group input-group-unstyled "> <input type="text" class="form-control" /> <span class="input-group-addon"> <i class="fa fa-search"></i> </span> </div>
然后用下面的css改变样式：
.input-group.input-group-unstyled input.form-control { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .input-group-unstyled .input-group-addon { border-radius: 4px; border: 0px; background-color: transparent; }
而且，这些解决scheme适用于任何input大小
将宽度为90％的类添加到您的input元素，并将下面的input图标类添加到您的跨度将达到你想要我想的。
.input { width: 90%; } .input-icon { display: inline-block; height: 22px; width: 22px; line-height: 22px; text-align: center; color: #000; font-size: 12px; font-weight: bold; margin-left: 4px; }
编辑根据Dan的build议，使用.input作为类名不是明智之举，有些更具体的build议。 我只是简单地使用.input作为你的CSS的通用占位符
<input type="text" name="whatever" id="funkystyling" />
以下是左侧图片的CSS：
#funkystyling { background: white url(/path/to/icon.png) left no-repeat; padding-left: 17px; }
以下是右侧图片的CSS：
#funkystyling { background: white url(/path/to/icon.png) right no-repeat; padding-right: 17px; }
我喜欢@KyleMit的关于如何创build一个无风格的input组的答案，但在我的情况下，我只想右侧没有风格 – 我仍然想在左侧使用一个input-group-addon，并使其看起来像正常的引导。 所以，我这样做了：
CSS
.input-group.input-group-unstyled-right input.form-control { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .input-group-unstyled-right .input-group-addon.input-group-addon-unstyled { border-radius: 4px; border: 0px; background-color: transparent; }
HTML
<div class="input-group input-group-unstyled-right"> <span class="input-group-addon"> <i class="fa fa-envelope-o"></i> </span> <input type="text" class="form-control"> <span class="input-group-addon input-group-addon-unstyled"> <i class="fa fa-check"></i> </span> </div>
您可以使用：after伪元素在纯CSS中使用，并利用边距获得创意。
下面是一个例子，使用Font Awesome作为search图标：
.search-box-container input { padding: 5px 20px 5px 5px; } .search-box-container:after { content: "\f002"; font-family: FontAwesome; margin-left: -25px; margin-right: 25px; }
<!-- font awesome --> <link href="font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="search-box-container"> <input type="text" placeholder="Search..." /> </div>
