Значок поиска не отображается в окне поиска

0

Я хочу иметь интерактивный значок поиска в окне поиска, но значок не отображается в окне поиска. Поиск значка класса не работает. Я использовал панель вместо navbar для настройки ее высоты и ее работоспособности. Кроме того, как мне настроить высоту окна поиска?

<div  class="bar navbar-inverse navbar-fixed-top">
   <div class="container">
            <span id="logo">  
                <a href="main.php">XYZ</a>
            </span>
            <span class="col-xs-5 right-inner-addon ">
    <i class="icon-search"></i>
    <input type="text" class="form-control" />
</span>
    </div>   
</div>

.right-inner-addon {
    padding-top: 6px;
    position: relative;
}
.right-inner-addon input {
    padding-right: 30px;    
}
.right-inner-addon i {
    position: absolute;
    right: 0px;
    padding: 10px 6px;
    pointer-events: none;
}

.bar{
    min-width: 800px;
    background-color: #563d7c;  
    width:100%; 
    height:43px;    
    box-shadow: 0px 3px 25px #888888;
    position: fixed;
}
Теги:
twitter-bootstrap-3
search-box

1 ответ

0
Лучший ответ

Если вы используете Bootstrap 3, вы можете попробовать использовать следующий код: http://jsfiddle.net/D2RLR/5888/

<div  class="bar navbar-inverse navbar-fixed-top">
    <div class="container">
        <span id="logo">  
            <a href="main.php">XYZ</a>
        </span>
        <span class="col-xs-5 right-inner-addon ">
            <div class="input-group">
                <input type="text" name="search" id="search" class="form-control" placeholder="Test" />
                <span class="input-group-addon" for="search">
                    <i class="glyphicon glyphicon-search"></i>
                </span>
            </div>
        </span>
    </div>   
</div>
  • 0
    спасибо .. это работает нормально, но значок поиска находится в форме кнопки .. как я могу я могу сделать значок для нажатия
  • 0
    Я обновил свой JSFiddle jsfiddle.net/D2RLR/5890. Теперь он работает при поиске. Если вам помог этот ответ, отметьте его как правильный ответ.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню