此 Input 元素包括一个放大镜作为图形。我已经尝试过 Bootstrap 几种方法,但它总是将放大镜留在输入元素之外。我也想过将图表添加为元素的背景,但问题是当我点击浏览器时,光标出现在放大镜上方。有没有其他方法可以得到它?
问题是浏览器位于导航栏内并且无法正常工作,图标移动到窗口边缘,但输入正常。这是代码:
<div class="container-fluid">
<header>
<nav class="navbar navbar-default navbar-static-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-1">
<span class="sr-only">Menú</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.html" class="navbar-brand">Empresa</a>
</div>
<form action="" id="navbar-1" class="collapse navbar-collapse navbar-form" role="search">
<div class="inner-addon left-addon">
<i class="glyphicon glyphicon-search"></i>
<input type="text" class="form-control" placeholder="Buscar en Empresa">
</div>
</form>
</nav>
</header>
这里有几个例子,一个输入带有字形图标,另一个没有:
使用引导程序 3.x
输入内的图标
引导程序 2.x
附加信息:
要了解字形图标的名称,请转到引导页面
西班牙语中的 bootstrap3 帮助
你已经用 Bootstrap 得到了答案。这是 CSS3 (flexbox) 的替代方案: