[英]Bootstrap - navbar-fixed-top inside another div
I have a div with width:500px
and height:300px
in the middle of a page. 我有一个width:500px
为div的div width:500px
, height:300px
在页面中间。
I want inside this div to have my navbar-fixed-top. 我希望在这个div 里面有我的导航栏固定顶部。 Can you please correct my html/css to accomplish that? 你可以请更正我的html / css来完成吗? Thanks 谢谢
http://jsfiddle.net/MgcDU/7874/ http://jsfiddle.net/MgcDU/7874/
<div class="container" style="width:500px;height:300px;border:solid black 1px;overflow:scroll">
<div class="row">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-inner" style="padding:10px">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" style="height:70px;" data-toggle="dropdown">
<div class="icon-some"></div>Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a>
</li>
<li><a href="#">Dropdown link</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div id="wrapper">
<div id="content">
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
</div>
<div id="padding-bottom"></div>
</div>
</div>
Based on what you said you want the nav bar with the class navbar-fixed-top to be inside the div, it seems simple enough. 根据你所说的你想要导航栏与navbar-fixed-top类在div里面,看起来很简单。
All I did was add a position:relative to the css file for the .navbar class 我所做的就是添加一个位置:相对于.navbar类的css文件
.navbar{
position:relative;
}
Here is it working 这是工作
http://jsfiddle.net/tKCm6/ http://jsfiddle.net/tKCm6/
Now if you wanted the nav to stay fixed in the div as you scroll down the page thats a different story. 现在,如果您希望导航在div中保持固定状态,则向下滚动页面以显示不同的故事。
Here is the code for that 这是代码
.container{
position:absolute;
}
.navbar{
position:fixed;
width:500px;
}
and live 并且活着
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.