具有标志图像和固定高度的响应式导航栏

问题描述：

我的页面中有一个固定的顶部导航栏，导航栏设置为固定高度的图像，导航栏本身有一个高度，我想要做的是垂直对齐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>

你想要的标志下面去导航栏在移动的看法？ –

@丹尼尔不，我希望他们彼此相邻 – jessica

欢迎来到* @ 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>

它看起来非常完美谢谢你，但你可以检查导航栏崩溃？它有什么问题 – jessica

我已经编辑过片段，现在检查 – Lucian

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

具有标志图像和固定高度的响应式导航栏

相关推荐