Question

我正在尝试向我的Bootstrap网站添加填充。但是，当我调整浏览器大小时，导航栏会完全混乱，而不是保持固定。这是图片http://imgur.com/a/YmyEW

的链接

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代码：

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

    }`

Answer 1

我发现您的代码格式存在一些问题，但我明白了。您最需要的是将<html> <header> </header> <body> <form name="acquista" id="registration-form"> User name <input name="user"><br> E-mail <input name="email"><br> Password <input name="psw"><br> <input id="quantitaAcquisto" type="hidden" name="quantitaAcquisto" value="100"> quantita <input id="quantita" type="number" name="quantita" onkeyup="validateQuantita()"><br> <span id="quantitaControl"></span> <input type="submit" value="Validate"> </form> <script> function validateQuantita() { var quantita = document.getElementById('quantita').value; var quantitaAcquisto = document.getElementById('quantitaAcquisto').value; var span = document.getElementById('quantitaControl'); document.acquista.quantita.style.color = '#000000'; span.innerHTML = ''; if (parseInt(quantita, 10) > parseInt(quantitaAcquisto, 10)) { document.acquista.quantita.style.color = 'red'; span.innerHTML = 'non hai abbastanza azioni'; } } </script> </body> </html>添加到导航栏，这样它就会始终位于顶部。我还建议自定义类，而不是完全覆盖navbar-fixed-top类。更好的是container - 所以它仍然会得到它的基本功能以及你的更改。我还看到你正在使用未定义的类container custom-container，因此不能用作容器。

Working Example

HTML

container2

CSS

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

Answer 2

<body>直接位于<head>之下。所以，它会弄乱你的容器。 Michael Cooker指出了你的一个好方向。

Boostrap填充问题

2 个答案: