Question

我的整个AngularJS网站都很有说服力。它响应屏幕尺寸＆amp;为移动设备，桌面设备和平板电脑加载相同的页面。但是，我无法以响应的方式将导航栏设置为不同设备上的单独高度。

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

现在，我在variables.less设置高度变量，这是我知道如何更改当前导航栏高度设置的地方。

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中覆盖导航栏高度，但即使使用!important标记，也无法将导航栏设置为其他高度。

App.less ＆lt; - 这不起作用：（

@media (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;
  }
}

注意我正在使用Bootstrap 3.此外，如果它有任何区别，Bootstrap会导入主app.less文件中，如下所示：@import "bower_components/bootstrap/less/bootstrap.less";

我该怎么办？如何以响应的方式完成？

（ A.K.A。没有为移动设备制作完全不同的网站）

感谢您的帮助！

Answer 1

根据上述评论，我建议您在媒体查询中将min-height设置为35px

.navbar {
    min-height: 35px;
  }

Answer 2

我认为阻止你设置高度的是min-height属性设置为具有类navbar的元素。

添加min-height: 35px就足够了：

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

Answer 3

请尝试以下语法：

@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;
  }

}

在LESS中编译Bootstrap - 如何为移动设备提供不同的导航栏高度？

3 个答案: