2016-02-06 224 views
0

您好我無法對齊我的頂部導航欄上的徽標。它在小視野下工作,但當我伸出時,徽標向右移動。我希望徽標能夠一直走到左邊,並在那裏留下小屏幕或大屏幕。引導左對齊導航問題

我試過.text-left和pull-left,但似乎沒有任何工作。

我正在使用引導程序。這是我的代碼到目前爲止。

謝謝!

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>TITLE GOES HERE</title> 
 

 
    <!-- Bootstrap --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
</head> 
 

 
<body> 
 

 
    <nav class="navbar navbar-default navbar-fixed-top" style="background-color: #1C2D8E"> 
 
    <div class="container"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
      <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="text-left" id="logo" href="#">LOGO GOES HERE</a> 
 
     </div> 
 
     <div id="navbar" class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li><a href="../navbar/">Settings</a> 
 
      </li> 
 
      <li><a href="../navbar-static-top/">Support</a> 
 
      </li> 
 
      <li class="active"><a href="./">Help<span class="sr-only">(current) </span></a> 
 
      </li> 
 
      <li><a href="../navbar-static-top/">Logout</a> 
 
      </li> 
 
     </ul> 
 

 
     </div> 
 
     <!--/.nav-collapse --> 
 
    </div> 
 
    </nav> 
 

 
    <!-- JQuery (necessary for Bootstrap's javascript plugins) --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> 
 
    </script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> 
 
    </script> 
 

 
</body> 
 

 
</html>

+0

似乎工作正常?你的意思是它被拉了一下,而不是固定在左邊? – Stewartside

+0

http://getbootstrap.com/components/#navbar-brand-image是你想做什麼,我認爲? – Blag

+0

是的,我希望它總是固定在左邊 –

回答

0

每文檔持有使用左導航欄,品牌類。

更換

<a class="text-left" id="logo" href="#">LOGO GOES HERE</a> 

<a class="navbar-brand" id="logo" href="#">LOGO GOES HERE</a> 

並取下包裝容器標籤:

<div class="container"></div> 

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>TITLE GOES HERE</title> 
 

 
    <!-- Bootstrap --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
</head> 
 

 
<body> 
 

 
    <nav class="navbar navbar-default navbar-fixed-top" style="background-color: #1C2D8E"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
      <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" id="logo" href="#">LOGO GOES HERE</a> 
 
     </div> 
 
     <div id="navbar" class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li><a href="../navbar/">Settings</a> 
 
      </li> 
 
      <li><a href="../navbar-static-top/">Support</a> 
 
      </li> 
 
      <li class="active"><a href="./">Help<span class="sr-only">(current) </span></a> 
 
      </li> 
 
      <li><a href="../navbar-static-top/">Logout</a> 
 
      </li> 
 
     </ul> 
 

 
     </div> 
 
     <!--/.nav-collapse --> 
 
    </nav> 
 

 
    <!-- JQuery (necessary for Bootstrap's javascript plugins) --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> 
 
    </script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> 
 
    </script> 
 

 
</body> 
 

 
</html>

+0

.navbar-band更好一些,但它仍然在更大的屏幕上向右滑動。 –

+0

您希望它完全固定在屏幕的左側,但仍然位於導航欄中央? – Chris

+0

是的,我希望它固定在左側,無論屏幕大小是多少,但是在導航欄上垂直固定 –