Question

我正在使用Bootstrap Framework，但喜欢自己创建导航。我发现我在一个包装里面制作了两个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;
}

Answer 1

您为这两个元素提供了width 100px，但是您省略了height。

Answer 2

它们是空的，因此高度为零。使用像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”类。

祝你好运，我希望有所帮助！

Divs在包装器中浮动而不显示

2 个答案: