带有徽标图像和固定高度的响应式导航栏答案

【问题标题】：Responsive navbar with logo image and fixed height带有徽标图像和固定高度的响应式导航栏
【发布时间】：2017-09-12 10:46:52
【问题描述】：

我的页面中有一个固定的顶部导航栏，导航栏设置为具有固定高度的图像，并且导航栏本身有一个高度，我想要做的是将导航栏品牌徽标与列表上的列表垂直对齐大屏幕和响应式屏幕的右侧，我该怎么做？这是我的代码：

.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>

【问题讨论】：

您希望徽标在移动视图中位于导航栏下方吗？
@DanielH 不，我希望它们彼此相邻
欢迎来到stackOverflow @Heba，如果任何答案对您有帮助vote it up，如果答案是您正在寻找的答案，请将其标记为Correct answe，以供未来的读者使用。谢谢！

标签： html css twitter-bootstrap navbar

【解决方案1】：

您可以使用flex。我已经编辑了你的 sn-p。

我还为响应行为编写了代码，以便在小屏幕中徽标和切换图标也能正确排列。

我已将height: auto !important 用于.navbar-brand，您可以在您的真实代码中删除!important，因为这不是必需的。我之所以写这个只是因为在这个 sn-p 中，引导程序样式覆盖了我的样式。

对于小屏幕删除.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>

【讨论】：

它看起来很完美，谢谢，但你能检查一下导航栏折叠吗？有问题
@Heba 你可以在css中添加.navbar-collapse { background-color: yellow; }来改变你想要的背景颜色，目前是transparent
@DanielH 您的想法也不错，但是添加了内容后，它看起来就不好了。所以最好按照我的建议去除高度
@Lucian 完美，谢谢！但我还有一个问题，你为什么要从 ul 中删除 navbar-right？我希望它们位于右侧而不是徽标旁边
谢谢。也不要忘记接受答案以供将来参考