Question

我无法在网络上找到解决我问题的真正方法。我是一名学生，我正在努力创建一个关于这个世界的复杂博客。我希望在我的导航栏中有一个更大的徽标，可以在多个设备上运行。标准的bootstrap导航栏很小。 They have a good logo and navbar height

HTML来源：

<nav class="navbar navbar-default navbar-static-top" role="navigation">

        <div class="container">

            <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="index.html"><img id="logo" src="img/logo.png" alt="7PAGES"></a>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li class="hover_wirtschaft">
                        <a href="#">Wirtschaft</a>
                    </li>
                    <li class="hover_technik">
                        <a href="#">Technik</a>
                    </li>
                    <li class="hover_fitness">
                        <a href="#">Fitness</a>
                    </li>
                    <li class="hover_wissenschaft">
                        <a href="#">Wissenschaft</a>
                    </li>
                    <li class="hover_entertainment">
                        <a href="#">Entertainment</a>
                    </li>
                    <li class="hover_reisen">
                        <a href="#">Reisen</a>
                    </li>
                    <li class="hover_wohnen">
                        <a href="#">Wohnen</a>
                    </li>
                </ul>
            </div>

        </div>

    </nav>

CSS代码：

#logo {
max-width: 100px;
max-height: 100%;
}

我会感激任何帮助，因为我被困在这一个。提前谢谢，我知道StackOverflow的人们做了很多！

Answer 1

如果您只想要一个更高的导航栏，只需添加此CSS：

.navbar {
  padding-top: 50px;
}

我选择padding-top使文字链接保持在导航栏的底部。

Answer 2

如果您只想更改导航栏的高度，可以执行以下操作：

.navbar {
    height: 100px;
}

看看这个demo。

Answer 3

我做了两次。首先，我的导航设置是这样的（有点不同，因为我的图像在移动设备中占用更多空间，我使用Roots for WP）：

    <header class="banner navbar navbar-default navbar-static-top" role="banner">
    <div class="col-xs-4 margin-top-20 margin-bottom-20 visible-xs">
      <a href="index.php"><img src="logo.png" class="img-responsive"></a>
    </div>
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
        <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 hidden-xs" href="index.php"><img src="logo.png" style="width:auto;height:40px;"></a>
    </div>

    <nav class="collapse navbar-collapse" role="navigation">
      <ul id="menu-primary-navigation" class="nav navbar-nav">
        <li class="menu-about"><a href="about-us/">About</a></li>
        <li class="menu-products"><a href="products/">Products</a></li>
        <li class="menu-equipment"><a href="equipment/">Equipment</a></li>
        <li class="menu-events"><a href="events/">Events</a></li>
        <li class="menu-resources"><a href="resources/">Resources</a></li>
        <li class="menu-contact"><a href="contact/">Contact</a></li>
        <li class="menu-order-online"><a href="order/">Order Online</a></li>
     </ul>    
   </nav> 
  </div>
</header>

然后我覆盖了Bootstrap：

@navbar-padding-horizontal: floor((@grid-gutter-width / .2)); @navbar-height: 70px;

当人们建议更改填充/高度时，您可以使用LESS轻松完成。作为覆盖，它将比CSS覆盖（相互依赖性）更好地在更新的Bootstrap版本中进行。

简单地说，使用LESS实际上使其他所有内容都计算到@ navbar-height设置，然后导航将垂直居中显示。

根据需要调整导航栏高度以支持您的图像。

增加引导程序中的徽标大小和导航栏大小

3 个答案: