如何在 Twitter Bootstrap 3 中更改导航栏大小

Question

我正在尝试增加 bootstrap 3.0 导航栏高度，该高度与固定顶部行为一起使用。

我该怎么做？

Answer 1

如果您使用的是 .less 或 .scss 版本，您可以在代码中编辑以下 $navbar-height 变量：

https://github.com/twbs/bootstrap/blob/master/less/variables.less#L360

如果没有，您需要通过以下方式用规则覆盖它：

.navbar {
    height: {new height};
}

Answer 2

如果没有看到您的代码，很难提供帮助，但通常在 Bootstrap 3 中，

这是less 变量@navber-height 和@navbar-padding-vertical 将调整导航栏的高度。

但在我当前的 Bootstrap 应用程序中，我使用不同的方式设置了它

header.navbar {
    height: 54px;
}

最简单的方法是导航栏上的inspect element，然后查看css 以查看height 的值在哪里。将其调整为所需的height。

然后在您的css 中使用!important 创建一个规则来覆盖现有的Bootstrap css。

这是另一个没有less 的例子。

.navbar-fixed-top {
    height: 70px !important; /* Whatever you want. */
}

创建新的css 文件并将您的覆盖放入其中。

<link rel='stylesheet' href='/stylesheets/bootstrap.css'/>
<link rel='stylesheet' href='/stylesheets/overrides.css'/>

在overrides.css内

当您检查元素时，如果此 css 规则存在于 Bootstrap 中，则在您现在添加的覆盖 css 文件中覆盖它。

记得使用!important

.navbar-fixed-top {
    height: 70px !important; /* Whatever you want. */
}