如何解决谷歌铬菜单导航栏布局问题与引导3？

这看起来在Firefox中恰到好处，但谷歌改变了布局。我不知道我错过了什么，使用自举3如何解决谷歌铬菜单导航栏布局问题与引导3？

看起来错在谷歌浏览器：

这是它是如何想看 - 像它在Firefox没有与下面的代码：

<!-- Navigation --> 
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="home.php">Logo</a> 
      <a href="#menu-toggle" class="navbar-brand pull-left" id="menu-toggle"><span class="glyphicon glyphicon-option-vertical glyphicon-lg pull-right"></span></a> 
     </div> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
       <li> 
        <form method="get" action="home.php"> 
         <div class="input-group search"> 
           <!-- Search Button -->       
           <span class="input-group-btn"> 
            <button class="btn btn-success" type="submit"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> 
           </span> 
           <!-- /End search Button Icon --> 
           <!-- Search Text --> 
           <input type="text" name="search" id="search" style= "border: 0;" class="form-control" placeholder="Search for ..." /> 
           <!-- End Search text --> 
          </div> 
         </form> 
       </li> 
       <li> 
        <div class='input-group search'> 
         <form action='home.php' method='post' > 
          <button type='submit' class='btn btn-success glyphicon glyphicon-plus-sign glyphicon-lg' name='Create' id='Create' value='Create' /> 
         </form> 
        </div> 
       </li> 
       <li> 
        <a href="goodbye.php">Logout</a> 
       </li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container --> 
</nav>

来源

2016-11-15 Sol

每引导

将表单内容放在.navbar-form中以便在窄视口中进行适当的垂直对齐和折叠行为。使用对齐选项来决定它在导航栏内容中的位置。

因此，您可以将navbar-form类添加到<form> s来解决此处报告的问题。

<form class="navbar-form" ... >

Codepen向您展示它在IE，Edge，Chrome和Firefox中看起来相同。

http://codepen.io/anon/pen/aBmdQq

来源

2016-11-15 23:01:06

就是这样！ :) – Sol

如何解决谷歌铬菜单导航栏布局问题与引导3？

回答

相关问题