如何制作高度不随屏幕尺寸变化的导航栏？答案

【问题标题】：How to make a navbar that does not change in height with screen size?如何制作高度不随屏幕尺寸变化的导航栏？
【发布时间】：2017-07-16 00:36:40
【问题描述】：

这是我的导航栏。我是 Bootstrap 的新手，它让我发疯。我想要的只是一个简单的导航栏，它不会随着屏幕的变化而改变它的高度，而是水平响应。这个似乎总是将导航栏高度更改为 768px 以下。

<nav class="navbar navbar-fixed-top navbar-default">
  <div class="container-fluid">
    <a href="{%url 'index'%}" class="navbar-left"><h5>blumury</h5></a>
    <ul class="nav navbar-nav navbar-right" ">
      <li><a href="{%url 'index'%}"><i class="material-icons" style="font-size: 16px;">home</i></a></li>
      <li><a href="#"><i class="material-icons" style="font-size: 16px;">vibration</i></a></li>
      <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="material-icons" style="font-size: 16px;">settings <span class='caret'></i></a>
        <ul class="dropdown-menu">
          <li><a href="{%url 'profile_view' pk=request.user.id%}">Profile</a></li>
          <li><a href="#">Write Block</a></li>
          <li><a href="#">Series</a></li>
          <li class="divider"></li>
          <li><a href="{%url 'signout'%}">Logout</a></li>
        </ul>
    </li>
  </ul>
</div>
</nav>

【问题讨论】：

这是你想要做的吗？ codepen.io/anon/pen/BZbgrb
谢谢！这几乎就是我想要做的。但我不需要正确的导航项目在断点后折叠为汉堡包图标。我将图标做得非常小，以便它们可以继续水平响应，而不会在小屏幕中折叠。我不知道该怎么做。尝试覆盖导航崩溃，并正确浮动导航项目，以便所有内容都保持在一条线上。不工作。

标签： html css twitter-bootstrap navbar

【解决方案1】：

你应该修改CSS代码，而不是HTML代码，你只是在上面显示HTML，它指的是引导文件，你通常可以在里面找到它们

<head>
<!-- This is a comment -->
</head>

所以您试图在错误的代码/文件中找到解决方案，请尝试使用以下链接添加或更改 css：https://www.w3schools.com/css/css_howto.asp

如果您还有其他问题，请告诉我！

【讨论】：

是的。我在寻求一种方法来覆盖 Bootstrap 的 css，这样我就可以避免 Bootstrap 在 768px 处的崩溃断点。这样，正确的导航项仍然可以在较小的屏幕中看到而不会折叠。