具有標誌圖像和固定高度的響應式導航欄

我的頁面中有一個固定的頂部導航欄，導航欄設置爲固定高度的圖像，導航欄本身有一個高度，我想要做的是垂直對齊navbar品牌標誌在右側的大型響應式屏幕上列出，我該怎麼做？這裏是我的代碼：具有標誌圖像和固定高度的響應式導航欄

.navbar{ 
 
height:150px; 
 
} 
 

 
.navbar-brand img{ 
 
height:95px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<html> 
 
<body><!-- Navigation --> 
 
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
 
     <div class="container"> 
 
      <!-- 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="#"> 
 
        <img src="http://placehold.it/150x50&text=Logo" alt=""> 
 
       </a> 
 
      </div> 
 
      <!-- Collect the nav links, forms, and other content for toggling --> 
 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
       <ul class="nav navbar-nav"> 
 
        <li> 
 
         <a href="#">About</a> 
 
        </li> 
 
        <li> 
 
         <a href="#">Services</a> 
 
        </li> 
 
        <li> 
 
         <a href="#">Contact</a> 
 
        </li> 
 
       </ul> 
 
      </div> 
 
      <!-- /.navbar-collapse --> 
 
     </div> 
 
     <!-- /.container --> 
 
    </nav> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 

 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
</body> 
 
</html>

來源

2017-04-16 jessica

你想要的標誌下面去導航欄在移動的看法？ –

@丹尼爾不，我希望他們彼此相鄰 – jessica

歡迎來到stackoverflow @ heba，如果有任何答案可以幫助你[把它投票]（http://meta.stackexchange.com/questions/173399/how-to-upvote-on -stack-overflow），如果答案是你要找的標記爲 [Correct answe]（http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work）for未來的讀者。謝謝！ –

可以使用flex。我編輯過你的片段。

我也編寫了響應行爲的代碼，以便在小屏幕徽標和切換圖標也會正確安排。

我已使用height: auto !important爲.navbar-brand您可以在您的真實代碼中刪除!important，因爲這不是必需的。我寫這只是因爲在這段代碼中，bootstrap風格重寫了我的風格。

爲.navbar

.navbar{ 
    height:auto; 
}

，如果你需要，你可以使用min-height代替小屏幕上刪除的高度。這是因爲引導程序使用的不是絕對的靜態元素，所以導航欄將在菜單打開時擴展。

.navbar{ 
 
height:150px; 
 
} 
 

 
.navbar-brand img{ 
 
height:95px; 
 
} 
 

 
.navbar > .container { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.navbar-brand { 
 
    height: auto !important; 
 
} 
 

 
.navbar-toggle { 
 
    margin-left: auto; 
 
    order: 2; 
 
} 
 

 
@media (max-width: 767px) { 
 
    .navbar > .container { 
 
    display: block; 
 
    } 
 
    .navbar-header { 
 
    display: flex; 
 
    align-items: center; 
 
    } 
 
    .navbar{ 
 
    height: auto; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<html> 
 
<body><!-- Navigation --> 
 
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
 
     <div class="container"> 
 
      <!-- 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="#"> 
 
        <img src="http://placehold.it/150x50&text=Logo" alt=""> 
 
       </a> 
 
      </div> 
 
      <!-- Collect the nav links, forms, and other content for toggling --> 
 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
       <ul class="nav navbar-nav"> 
 
        <li> 
 
         <a href="#">About</a> 
 
        </li> 
 
        <li> 
 
         <a href="#">Services</a> 
 
        </li> 
 
        <li> 
 
         <a href="#">Contact</a> 
 
        </li> 
 
       </ul> 
 
      </div> 
 
      <!-- /.navbar-collapse --> 
 
     </div> 
 
     <!-- /.container --> 
 
    </nav> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 

 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
</body> 
 
</html>

來源

2017-04-16 19:23:12 Lucian

它看起來非常完美謝謝你，但你可以檢查導航欄崩潰？它有什麼問題 – jessica

我已經編輯過片段，現在檢查 – Lucian

@ Heba，你可以添加'.navbar-collapse {background-color：yellow; }'以CSS來改變背景顏色爲任何你想要的，目前是'透明' –

具有標誌圖像和固定高度的響應式導航欄

回答

相關問題