根据屏幕宽度调整导航栏最小高度

Question

我正在使用 bootstrap 并为导航栏设置了 150px 的最小高度。这可行，但当屏幕宽度低于 768px 时，我想将最小高度重新调整为 30px。

我正在使用 .navbar-min-height 类来设置最小宽度，因此尝试使用新的最小高度像素在 @media 下再次调用该类，但导航栏仍保持 150px 的相同高度。无论如何我可以解决这个问题吗？

CSS 文件

/* works */
.navbar-min-height{
    min-height: 150px;
}

@media only screen and (max-width: 768px) {
    /* Not working */
    .navbar-min-height{
        min-height: 30px;
    }
} 

Html 页面

<nav class="nav navbar navbar-fixed-top navbar-min-height navbar-custom">
    ......
</nav>

Answer 1

您需要将 .navbar-min-height 放入@media（最小宽度：769）

这是一个工作示例：

@media (min-width: 789px) {
   nav p {
     font-size: 1.5em;
     }
  }

@media (max-width: 788px) {
    nav p {
      font-size: 3em;
     }
  }

<nav>
  <p>Lorem Ipsum Sit Amet</p>
</nav>

现在只需运行上面的代码片段，然后调整屏幕大小，当屏幕宽度低于 789 时，字体大小就会发生变化。

现在，如果您要删除@media min-width，那么文本将不会增加大小。

Answer 2

删除了删除了删除了

Answer 3

正如它所说，

min-height

是最小值，而不是最大值。如果

navbar

的高度为 150，那么其中可能有元素迫使它具有更大的高度。检查子元素。

此外，使用检查器检查给定的媒体查询是否生效。