帶有徽標圖像和固定高度的自適應導航欄
[英]Responsive navbar with logo image and fixed height
問題描述
我的頁面上有一個固定的頂部導航欄，該導航欄設置為具有固定高度的圖像，並且導航欄本身具有高度，我要做的是將導航欄品牌徽標與右側列表中的列表垂直對齊大屏幕和響應式屏幕，我該怎么做？ 這是我的代碼：
.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>
1 個解決方案
解決方案1
1 已采納 2017-04-16 19:23:12
您可以使用flex 。 我已經編輯了您的代碼段。
我還編寫了響應行為的代碼，以便在小屏幕徽標和切換圖標中也能正確排列。
我已經使用過height: auto !important .navbar-brand height: auto !important可以在實際代碼中刪除!important ，因為這是沒有必要的。 我之所以寫這篇文章，僅是因為在這段代碼中，引導程序樣式覆蓋了我的樣式。
對於小屏幕，請刪除.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>
更改固定導航欄的寬度並保持折疊元素並添加徽標/圖像
[英]Changing width of Fixed navbar and keeping Collapse element and adding logo/image
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.