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

【问题标题】：Compiling Bootstrap in LESS - How can I have a different navbar height for mobile?在 LESS 中编译 Bootstrap - 如何为移动设备设置不同的导航栏高度？
【发布时间】：2015-09-25 06:38:58
【问题描述】：

我的整个 AngularJS 网站都是响应式的。它响应屏幕尺寸并为移动设备、台式机和平板电脑加载相同的页面。但是，我无法以响应方式将导航栏设置为不同设备上的单独高度。

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

现在，我在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

@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. 没有为移动设备制作一个完全不同的网站）

感谢大家的帮助！

【问题讨论】：

您是否使用开发工具检查了导航栏以查看应用了哪些 css？
看起来 min-height 被应用到 64px 高的 .navbar
那将是你的问题 - 最小高度总是覆盖高度和最大高度

标签： css twitter-bootstrap less

【解决方案1】：

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

.navbar {
    min-height: 35px;
  }

【讨论】：

哎呀，这就是我所要做的

【解决方案2】：

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

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

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

【讨论】：

【解决方案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;
  }

}

【讨论】：