2017-06-01 180 views
0

我想向我的Bootstrap網站添加填充。但是,當我調整瀏覽器的大小時,導航欄完全混亂而不是保持固定。這裏是一個鏈接,圖片http://imgur.com/a/YmyEWBoostrap填充問題

的html代碼:

<nav class="nav`bar navbar-custom"> 
<div class="container2"> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="#">logo</a> 
    </div> 
    <div class="collapse navbar-collapse" id="myNavbar"> 
    <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">WHO</a></li> 
     <li><a href="#">WHAT</a></li> 
     <li><a href="#">WHERE</a></li> 
    </ul> 
    </div> 
</div> 

CSS鱈魚e:

`body{ 
    padding-left: 200px; 
    padding-right: 200px; 
} 
.navbar-custom { 
    background-color:transparent; 
    color:#000; 
    border-radius:0; 
    padding-top: 50px; 

} 

.navbar-custom .navbar-nav > li > a { 
    color:#000; 
} 

.navbar-custom .navbar-nav > .active > a { 
    color: #000; 
    background-color:transparent; 
} 

.navbar-custom .navbar-nav > li > a:hover, 
.navbar-custom .navbar-nav > li > a:focus, 
.navbar-custom .navbar-nav > .active > a:hover, 
.navbar-custom .navbar-nav > .active > a:focus, 
.navbar-custom .navbar-nav > .open >a { 
    text-decoration: none; 
    background-color: #ff0000; 
} 

.navbar-custom .navbar-brand { 
    color:#eeeeee; 
} 
.navbar-custom .navbar-toggle { 
    background-color:#eeeeee; 
} 
.navbar-custom .icon-bar { 
    background-color:#33aa33; 
} 


.container { 
    padding-top: 70px; 
    padding-bottom: 70px; 
    font-family: 'Bree Serif', serif; 
    font-size: 20em; 

    } 

    .footer-right{ 
     padding-top: 70px; 

     font-family: 'Bree Serif', serif; 

    }` 
+0

因爲您的導航欄是靜態的,所以填充也會影響導航欄。無法分辨,因爲這個問題中沒有CSS。嘗試通過設置'padding:0;'或'padding:0!important'來重置'.navbar-custom'的填充。 – Jer

+0

填充的要點是什麼?而不是將其應用於身體,您應該將其應用於您的外部容器。而且你不需要移動400像素的填充...這比大多數手機的視口寬度更寬。因此,您可以根據您的佈局刪除基於媒體查詢的填充位置https://codepen.io/mcoker/pen/QgLKJQ –

+0

您好,我不希望我的文本在網頁末尾正確顯示,我希望它在200px左右 –

回答

0

我看到你的代碼格式化有些問題,但有想法。您最需要的是將類navbar-fixed-top添加到您的導航欄,以便它始終位於頂部。而且我還建議自定義類,而不是完全覆蓋container類。更好的將是container custom-container - 所以它仍然會得到它的基本功能和額外的變化。我還看到您正在使用未定義的類container2,因此無法作爲容器工作。

Working Example

HTML

<nav class="navbar navbar-custom navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Brand</a> 
    </div> 
<div class="collapse navbar-collapse" id="myNavbar"> 
    <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">WHO</a></li> 
     <li><a href="#">WHAT</a></li> 
     <li><a href="#">WHERE</a></li> 
    </ul> 
    </div> 
    </div> 
</nav> 

<div class="container custom-container"> 

    <div class="text-center"> 
    <h1>Bootstrap starter template</h1> 
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> 
    </div> 

</div><!-- /.container --> 

CSS

body{ 
    padding-top: 100px; 
    padding-left: 200px; 
    padding-right: 200px; 
} 

.navbar-custom { 
    background-color:transparent; 
    color:#000; 
    border-radius:0; 
    padding-top: 50px; 

} 

.navbar-custom .navbar-nav > li > a { 
    color:#000; 
} 

.navbar-custom .navbar-nav > .active > a { 
    color: #000; 
    background-color:transparent; 
} 

.navbar-custom .navbar-nav > li > a:hover, 
.navbar-custom .navbar-nav > li > a:focus, 
.navbar-custom .navbar-nav > .active > a:hover, 
.navbar-custom .navbar-nav > .active > a:focus, 
.navbar-custom .navbar-nav > .open >a { 
    text-decoration: none; 
    background-color: #ff0000; 
} 

.navbar-custom .navbar-brand { 
    color:#eeeeee; 
} 
.navbar-custom .navbar-toggle { 
    background-color:#eeeeee; 
} 
.navbar-custom .icon-bar { 
    background-color:#33aa33; 
} 


.container-custom { 
    padding-top: 70px; 
    padding-bottom: 70px; 
    font-family: 'Bree Serif', serif; 
    font-size: 2em; 

    } 
0

<body>是直屬的<head>雖然。所以,它會弄亂你的容器。邁克爾·庫克爾正朝着一個好的方向指引你。