Question

我不知道为什么搜索框和按钮与菜单链接不一致。我使用bootstrap 3.3.4 我使用span但它不会留下标识和菜单链接。当我将margin-top应用于按钮时，它会在按钮上创建空间。 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;

 }

Answer 1

如果您尝试将搜索框和按钮放置在标题中，它将不会以这种方式工作，因为您将这些元素放在＆＃34; navbar-header＆＃34; DIV。尝试将这些元素放在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;}

Answer 2

只需更改<span class="col-xs-7 col-md-5 col-lg-5">

即可

到

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

演示Here

这是你想要的吗？

更新：由于Bootstrap Grid System

而更新

Answer 3

我之前也曾尝试过你！但是这种做法让我感到害怕。也希望你.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>

搜索框不是内联的

3 个答案: