0

我正在使用 Bootstrap 框架，但喜欢制作自己的导航。我发现我在带有浮动的包装器中制作的 2 个 div 没有显示，不知道为什么。 http://heidixu.com/misc/nav_div/

结构是这样的：

<div class="navBar-wrapper">
    <div class="logo"></div>
    <div class="navItems"></div>
</div>

.navBar-wrapper {
    max-width:1170px;
    background-color:black;
    height:45px;
    padding-left:15px;
    padding-right:15px;
    z-index:99999;
    margin-left:auto;
    margin-right:auto;
    position:relative;
}

.logo {
    width:100px;
    background-color:green;
    float:left;
}

.navItems {
    float:right;
    background-color:red;
    width:100px;
}
4

2 回答 2

0

您为这两个元素提供了 a widthof 100px，但是您省略了height.

于 2013-10-27T02:34:02.780 回答
0

它们是空的，因此高度为零。使用诸如 firebug 或 Chrome 开发工具之类的工具来检查您的页面，以发现这一点。

要修复它，您可以执行以下任何操作：

.logo {
    width:100px;
    height:44px;
    background-color:green;
    float:left;
}

.navItems {
    float:right;
    background-color:red;
    width:100px;
    height:44px;
}

或者更好的是，这将动态工作：

$(document).ready(function(){
    var navheight = $(".navBar-wrapper").height;
    $(".logo").css("height",navheight);
    $(".navItems").css("height",navheight);

});

或者最后，深入了解一下 Bootstrap 的示例。我想到了“navbar-brand”和“navbar-text”类。

祝你好运，希望对你有帮助！

于 2013-10-27T02:35:25.707 回答