Question

希望您能通过以下问题帮助我：我正在玩bootstrap，我在左边的网站上创建了一个带有徽标的标题，这很好，在右边的网站上我创建了一个div容器，在这个div中我有一个div用于tel然后我有导航栏。

请参阅屏幕截图：http://screencast.com/t/ni4izklqtB

这是我的代码：

<header id ="mainHeader" class="row">
        <div class="logo col-lg-3">
            <hgroup>
   <h1 id ="logo"><a href="#"><img src="images/webversielogo.png"    class="img-responsive"></a></h1>
            </hgroup>
        </div>

        <div class="telNav col-lg-9" >

        <div class="telefoon">
        SOME TEXT 
        </div><!--Einde Telefoon Class-->

        <div class="navbar navbar-inverse" role="navigation">
         <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                    <a class="navbar-brand" href="#">Kies uw Pagina:</a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div><!--/.container -->
    </div> <!--/.navbar navbar-inverse-->
</div>

这是css：

.logo{
z-index:200;
}

#logo img{
width:100%;
max-width:250px;
}

/*Start of the Header*/
header{
background-image: -webkit-gradient(
linear,
right top,
right bottom,
color-stop(0, #5C5656),
color-stop(1, #241E20)
);
background-image: -o-linear-gradient(bottom, #5C5656 0%, #241E20 100%);
background-image: -moz-linear-gradient(bottom, #5C5656 0%, #241E20 100%);
background-image: -webkit-linear-gradient(bottom, #5C5656 0%, #241E20 100%);
background-image: -ms-linear-gradient(bottom, #5C5656 0%, #241E20 100%);
background-image: linear-gradient(to bottom, #5C5656 0%, #241E20 100%);
}
.logo .navbar.navbar-inverse {
overflow: hidden;
}

当我将＃telNav的位置设置为相对而导航栏时，绝对和底部：0是跳出范围并超出父div。我想总是用telNav的右底部堆叠导航栏的右下角，谢谢你已经回答了，

EZStack

Answer 1

如果要向下推动NavBar，可以在封闭div中使用另外两个div元素。第一个将内容保存在NavBar上方，下一个将NavBar保持在主div的底部。您必须指定第一个div元素的高度。

Bootstrap导航栏定位在其他div的底部

1 个答案: