2013-11-03 69 views
4

我有一個div,width:500pxheight:300px位於頁面中間。
我想裏面這個div有我的導航欄固定頂部。 你可以請糾正我的HTML/CSS來完成? 感謝Bootstrap - navbar-fixed-top在另一個div

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> 

回答

6

根據你說你想用類導航欄固定,頂部的導航欄是DIV中,它看起來很簡單。

我所做的只是添加位置:相對於css文件的.navbar類

.navbar{ 
position:relative; 
} 

下面是它的工作

http://jsfiddle.net/tKCm6/

現在,如果你想要的NAV留在向下滾動頁面時固定在div上,這是一個不同的故事。

以下是一個

.container{ 
    position:absolute; 
} 
.navbar{ 
    position:fixed; 
    width:500px; 
} 

代碼和生活

http://jsfiddle.net/vARTv/