如何保持导航栏高度固定，即使它包含更大的项目（Bootstrap）

Question

我在Boottrap中有一个持有几次的NavBar。其中一个是高度比整个酒吧大的盒子。问题是当项目更大时导航栏高度增加。如果它更大，我希望项目掉出导航栏。并且也保持响应方面。

样本：http://www.bootply.com/oeFRrvH8pl

我的代码：

<nav class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">NAME</a>

            </div>
            <div class="nav navbar-nav navbar-right">
                <div class="red">
                12345678 <br> Call us
                </div>
            </div>
        </div>
</nav>

此图片是我希望实现的目标：

有什么想法吗？

Answer 1

在导航栏上设置固定高度。像这样：

.navbar {
    height: 50px;
}

Answer 2

使用CSS将.navbar的高度设置为10px（或者想要制作它的大小）。

Answer 3

除了为height设置.navbar的其他答案外，您还可以更改position的{​​{1}}，如下所示：

.red

Answer 4

从导航栏中取出该元素

<style>
.red{
position:relative;
margin-top:-"here specify the nav height";
right:0;
z-index:99
}

</style>
<nav class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">NAME</a>

            </div>

        </div>
</nav>
                <div class="red">
                12345678 <br> Call us
                </div>