окно поиска не является встроенным

Я не знаю, почему окно поиска и кнопка не соответствуют ссылкам меню. Я использую bootstrap 3.3.4 Я использую span, но он не остается на линии с логотипом и ссылками меню. Когда я применяю маркер-верх к кнопке, он создает пространство в botton. https://jsfiddle.net/MeycD/868/окно поиска не является встроенным

<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
<div class="navbar-header"> 
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
<span class="sr-only">Toggle navigation</span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</button> 
<a href= "#"class="navbar-brand"><span class="icon-bar"><img src="raiselogo.png"/> logo</span></a> 
</div> 
<div class="collapse navbar-collapse navbar-ex1-collapse"> 
<span class="col-xs-7 col-md-5 col-lg-5"> 
<input type="search" id="q" class="form-control input-sm" name="q" placeholder="Enter Search Term" ></span> 
<span class="col-xs-3 col-md-4 col-lg-4 "id="srchbtn"> 
    <!-- Button trigger modal --> 
    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal"> 
Search video 
    </button> 
</span> 
<ul class="nav navbar-nav pull-right"> 

    <li class="active "><a href="#">Home</a> 
    <li><a href="#">Link 1</a></li> 
    <li><a href="#">Link 2</a></li> 
    <li><a href="#">Link 3</a></li> 
    <li><a href="logout.php">log out</a></li> 
</ul> 
</div> 
</div>

Это код стиль:

#q{ 
margin-top:5px; 
display: inline; 
} 

    #srchbtn{ 
display: inline;margin-top:5px; 

}

источник

2015-03-24 user3944364

Просто измените <span class="col-xs-7 col-md-5 col-lg-5">

<span class="col-xs-7 col-md-3 col-lg-3">

Demo Here

Это то, что вы хотите?

Обновление: Его из Bootstrap Grid System

источник

2015-03-24 10:53:19

да, это. Спасибо – user3944364

Возможно, вы могли бы объяснить, почему именно это работает? Всегда лучше учиться, а не копировать код :) –

См. Обновленный ответ. –

Если вы пытаетесь поместить окно поиска и кнопки для размещения в заголовке, он не будет работать этот путь, так как вы поместив эти элементы вне div-navbar-header. Попытайтесь поместить эти элементы внутрь этого div и спрячьте их, пока не нажмете кнопку меню, на которой их будет показывать простой jQuery.

Проверить это jsFiddle для справки jsfiddle.net/ynh95c9k с незначительными изменениями в CSS:

#q {display: inline;float: left; width: 200px; margin-top: 10px;} 
#srchbtn{display: inline;float: left; margin-top: 10px;}

источник

2015-03-24 10:53:01

Я также попытался, как вы, прежде чем !! Но этот подход скомпрометированы me.Hope для вас also.Navbar и формы стиля конфликта, здесь мы можем использовать navbar-form как следующие:

 <ul class="nav navbar-nav "> 
     <li> 
     <form class="navbar-form navbar-right" method="GET" > 
      <input type="search" id="q" class="form-control input-sm" name="q" placeholder="Enter Search Term" /> 
      <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal"> Search video</button> 
     </form> 
    </li> 
    </ul>

источник

2015-03-24 11:01:29

окно поиска не является встроенным

ответ

Смежные вопросы