如何解決谷歌鉻菜單導航欄佈局問題與引導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？

回答

相關問題