我想向我的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;
}`
因爲您的導航欄是靜態的,所以填充也會影響導航欄。無法分辨,因爲這個問題中沒有CSS。嘗試通過設置'padding:0;'或'padding:0!important'來重置'.navbar-custom'的填充。 – Jer
填充的要點是什麼?而不是將其應用於身體,您應該將其應用於您的外部容器。而且你不需要移動400像素的填充...這比大多數手機的視口寬度更寬。因此,您可以根據您的佈局刪除基於媒體查詢的填充位置https://codepen.io/mcoker/pen/QgLKJQ –
您好,我不希望我的文本在網頁末尾正確顯示,我希望它在200px左右 –