html - 如何保持导航栏高度固定，即使它包含更大的元素(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;
}