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

Question

希望你能帮我解决以下问题: 我正在玩 Bootstrap ，我在左侧站点左侧创建了一个带有 Logo 的 header ，这很好，在右侧站点我创建了一个 div 容器，在这个 div 中我有一个用于 tel 的 div 然后我有导航栏。

请看截图: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 的右下角堆叠在一起， 感谢您已经回答，

EZ堆栈

Answer 1

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