Этот элемент ввода включает в себя увеличительное стекло в качестве изображения. Я пробовал 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):