2014-10-07 144 views
0

好吧,所以我有一個Bootstrap標準導航欄,裏面的容器也是由引導程序設計的。現在Bootstrap Navbar固定到頂部

<div class="container"> 
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container-fluid"> 
     <!-- Nav Bar Goes On From Here. Only Posted this as an examlpe --> 

,當我加入了navbar-fixed-top類導航欄,它出來的容器,並從左至右在屏幕上填充。我意識到這是Bootstrap的默認行爲,但我怎樣才能保持容器的寬度?並以一種敏感的方式做到這一點。

回答

1

container-fluid應該是全角,根據引導文檔。如果您將其更改爲另一個container,這有幫助嗎?

0

使用本

@media (min-width: 1200px) { 
    .navbar { 
     position: fixed !important; 
     top: 0px; 
     width: 940px; 
    } 
} 

或添加導航欄級集裝箱

+0

這隻適用於,如果你不想要響應標題。 – 2014-10-07 21:00:34

+0

我真的很想在沒有很多工作的情況下做出反應。 – user3968645 2014-10-07 21:00:40

+0

在媒體查詢中設置 – 2014-10-07 21:04:01

0

爲.navbar固定頂的CSS是非常直截了當:

.navbar-fixed-top, 
.navbar-fixed-bottom { 
    position: fixed; 
    right: 0; 
    left: 0; 
    border-width: 0 0 1px; 
} 

.navbar-fixed-top { 
    top: 0; 
} 

(我認爲' s是什麼股票版本。)

如果你想它固定到頂部,但不希望它是全寬,那麼你真的不想要navbar-fixed-top。你只是想爲你的導航欄添加類似「top:0」的風格/類。

0

如果添加容器到<導航/>

你得到如下:http://jsfiddle.net/bo9jgpk2/

<nav class="navbar navbar-default navbar-fixed-top container" role="navigation">