twitter-bootstrap Bootstrap - 另一个 div 内的导航栏固定顶部

Bootstrap - navbar-fixed-top inside another div

提问by SexyMF

I have a div with width:500pxand height:300pxin the middle of a page.
I want insidethis div to have my navbar-fixed-top. Can you please correct my html/css to accomplish that? Thanks

我在页面中间有一个 divwidth:500px和height:300px。
我希望在这个 div 中有我的导航栏固定顶部。你能更正我的 html/css 来完成吗？谢谢

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>

回答by Anders Kitson

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

和生活

http://jsfiddle.net/vARTv/

http://jsfiddle.net/vARTv/