Boostrap填充问题

我想向我的Bootstrap网站添加填充。但是，当我调整浏览器的大小时，导航栏完全混乱而不是保持固定。这里是一个链接，图片http://imgur.com/a/YmyEW Boostrap填充问题

的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; 

    }`

来源

2017-06-01 Spikey Cakey

因为您的导航栏是静态的，所以填充也会影响导航栏。无法分辨，因为这个问题中没有CSS。尝试通过设置'padding：0;'或'padding：0！important'来重置'.navbar-custom'的填充。 – Jer

填充的要点是什么？而不是将其应用于身体，您应该将其应用于您的外部容器。而且你不需要移动400像素的填充...这比大多数手机的视口宽度更宽。因此，您可以根据您的布局删除基于媒体查询的填充位置https://codepen.io/mcoker/pen/QgLKJQ –

您好，我不希望我的文本在网页末尾正确显示，我希望它在200px左右 –

我看到你的代码格式化有些问题，但有想法。您最需要的是将类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; 

    }

来源

2017-06-01 14:56:15 Hexodus

的<body>是直属的<head>虽然。所以，它会弄乱你的容器。迈克尔·库克尔正朝着一个好的方向指引你。

来源

2017-06-01 14:58:34 Harley

Boostrap填充问题

回答

相关问题