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

Question

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

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

Answer 1

你可以使用 flex。我已经编辑了您的代码段。

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

我已将 height: auto !important 用于 .navbar-brand 您可以在实际代码中删除 !important，因为这不是必需的。我写这篇文章只是因为在这个片段中，bootstrap 风格压倒了我的风格。

对于小屏幕移除高度 .navbar

.navbar{
  height:auto;
}

如果需要，可以使用min-height代替。这是因为 bootstrap 将折叠用作静态元素而不是绝对元素，因此导航栏将在菜单打开时扩展。

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

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

Responsive navbar with logo image and fixed height

html

css

navbar

twitter-bootstrap