Bootstrap3 导航栏固定顶部高度答案

【问题标题】：Bootstrap3 navbar-fixed-top heightBootstrap3 导航栏固定顶部高度
【发布时间】：2018-01-22 10:44:23
【问题描述】：

我在我的项目中使用带有 navbar-fixed-top 的 bootstrap3。在提到的导航栏中，有一个高度约为 700 像素的 DIV，这使得整个导航栏拉伸到 700 像素并覆盖了我的内容（我无法在主容器的输入内部单击）。

有人可以帮助正确设置溢出参数，因此我在导航栏内的元素不会拉伸整个导航栏，而是保持在它的“外部”？

<nav class="navbar navbar-default navbar-fixed-top">
 ...
 <my-custom-widget></my-custom-widget> <!-- this is the widget with height of 700px -->
 ...
</nav>

谢谢。

【问题讨论】：

请发布其余代码，以便我们可以使用视觉效果。这对我们没有任何帮助。设置一个 js fiddle 什么的。

标签： css twitter-bootstrap-3 navbar

【解决方案1】：

如果您正在创建任何自定义小部件，则可以将该小部件的位置属性设置为绝对或固定，如果您想防止它过大，则可以使用 css 的溢出属性

以这支笔为例

my-custom-widget{
    position: absolute;
    top: 0;
    right: 0;
}

https://codepen.io/anon/pen/XaezNr

【讨论】：

谢谢。我会选择绝对位置——这将是最简单的方法。 :)

【解决方案2】：

您可以设置导航栏的固定高度，然后将溢出设置为隐藏。它应该可以解决您的问题。但是，如果您在该导航栏中有下拉菜单，那么由于隐藏的溢出，您将无法再看到子菜单项

【讨论】：