Css 在更少的时间内编译引导-如何为移动设备设置不同的导航栏高度？

我的整个AngularJS网站都是Responsive。它对屏幕大小做出响应，为手机、台式机和平板电脑加载相同的页面。然而，我很难让导航栏在不同的设备上以响应的方式保持独立的高度

大多数情况下，我只是希望导航栏在移动设备上以更细的高度加载，以便更多的屏幕空间可以用于用户希望看到的实际内容

现在，我正在

variables.less

中设置高度变量，这是我目前知道如何更改导航栏高度设置的地方

变量。较少

// Basics of a navbar
@navbar-height:                    64px; // most relevant line!
@navbar-margin-bottom:             @line-height-computed;
@navbar-border-radius:             @border-radius-base;
@navbar-padding-horizontal:        floor((@grid-gutter-width / 2));
@navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);
@navbar-collapse-max-height:       340px;

@navbar-default-color:             @gray-light;
@navbar-default-bg:                #fff;
@navbar-default-border:            transparent;

好的，这很好，但我想为桌面/平板电脑设置

64px

高度，但为移动屏幕上的导航栏高度设置

38px

高度

我已经尝试过在我的本地CSS中使用媒体查询来超越导航栏的高度，但即使使用

！重要信息

标记将导航栏设置为其他高度不起作用

---

App.less尝试以下语法：

@media only screen and (max-width: 767px) {

   .navbar {
    height: 35px !important;
  }

  .navbar-collapse ul li a {
    line-height: 35px;
    height: 35px;
    padding-top: 0;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    vertical-align: middle;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
  }

  .navbar-brand li a {
    line-height: 35px;
    height: 35px;
    padding-top: 0;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    vertical-align: middle;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
  }

}

---

基于以上评论，我建议您在媒体查询中将最小高度设置为35px

.navbar {
    min-height: 35px;
  }

---

我认为阻止您设置高度的是设置为class

navbar

元素的

minheight

属性

添加

最小高度：35px

就足够了：

@media (max-width: 767px) {
  .navbar {
    height: 35px;
    min-height: 35px;
  }
...

---

您是否使用开发工具检查了导航栏以查看应用了什么css？看起来最小高度正在应用于64px tallwell的.navbar，这将是您的问题-最小高度始终覆盖高度和最大高度Woops，这就是我所要做的

@media (max-width: 767px) {
  .navbar {
    height: 35px;
    min-height: 35px;
  }
...