無法制作頂部導航欄全寬

披露：我試圖在堆棧交換存檔中找到此問題的解決方案，但沒有任何工作。無法制作頂部導航欄全寬

我正在嘗試創建一個導航欄，它跨越了bootstrap中頁面的整個寬度。

我不能這樣做。

我試過這樣做col-md-12類，我創建自己的新類和navbar-static-top。他們都沒有工作。在這個導航欄的左邊和右邊總是有這個奇怪的10px左右的邊距。在我看來，好像在某些父元素或包含導航欄的div之一中有填充，但我不能在我的生活中找到它。

也沒有價值：頁面的其餘部分是col-md-12，並沒有這個問題。

下面是一些可能相關的CSS元素。我已經將尺寸基本上都調整到了100％的寬度。

含/父元素

html { 
font-family: Impact; 
-webkit-text-size-adjust: 100%; 
-ms-text-size-adjust: 100%; 
height: 100%; 
width: 100%; 
margin: 0%; 
padding: 0%; 
} 

body { 
margin: 0%; 
padding: 0%; 
height: 100%; 
width: 100%; 
background-image: url(../images/background.jpg); 
background-size: 100% 100%; 
background-repeat: no-repeat; 
} 

.container { 
padding-right: 0%; 
padding-left: 0%; 
margin-right: auto; 
margin-left: auto; 
height: 100%; 
width: 100%; 
} 

.container-fluid { 
padding-right: 0%; 
padding-left: 0%; 
margin-right: auto; 
margin-left: auto; 
height: 100%; 
} 

.col-md-12.alpha { 
height: 100%; 
width: 100%; 
}

在嘗試創建導航欄本身

.col-md-12.beta { 
    background-color: black; 
    height: 10%; 
    width: 100%; 
    margin: 0%; 
    padding: 0%; 
    } 

    .navbar1 { 
    background-color: black; 
    opacity: 0.4; 
    height: 10%; 
    width: 100%; 
    margin: 0%; 
    padding: 0%; 
    } 

.navbar-static-top { 
z-index: 1000; 
border-width: 0 0 1px; 
background-color: black; 
min-height: 10px; 
}

來源

2015-10-10 Andrew Button

你能以你的問題網頁提供一個網址？我認爲這個問題是在你的代碼中的其他地方。 –

顯示你的html頁面代碼 – scaisEdge

只要看看你的<nav class="navbar navbar-default navbar-static-top">之外的主要的div容器在體內。我知道一個容器必須包裝所有的引導元素。呃，事實並非如此。即使在他們自己的模板示例中，他們也會在外面取走<nav>指令。

不要忘了把導航中的一切到一個容器：

<body> 
    <nav class="navbar navbar-default navbar-static-top"> 
    <div class="container"> 
     ... 
    </div> 
    </nav> 
    ... 
</body>

來源

2015-10-10 21:24:21

無法制作頂部導航欄全寬

回答

相關問題