Bootstrap导航栏宽度大于视口

我的导航栏大于内容。试图通过点击抛出浏览器的CSS来解决问题，但没有任何工作。我没有改变bootstrap本身的任何内容，也没有改写与navbar相关的东西。Bootstrap导航栏宽度大于视口

我的CSS & HTML：

/* =============================================================================================== 
 
             Allgemeine Settings 
 
    ===============================================================================================*/ 
 
html, body{ 
 
    height: 100%; 
 
    width: 100%; 
 
    max-width: 100%; 
 
    font-family: Arial; 
 
} 
 

 
body{ 
 
overflow-x:hidden; 
 
} 
 

 
.clearfix:before, 
 
.clearfix:after { 
 
    content: " "; 
 
    display: table; 
 
} 
 
.clearfix:after { 
 
    clear: both; 
 
} 
 
.clearfix { 
 
    *zoom: 1; 
 
} 
 

 

 
/* =============================================================================================== 
 
             Landing-Page Settings 
 
    ===============================================================================================*/ 
 

 

 
.home-section{ 
 
    height: auto !important; 
 
    min-height: 100%; 
 
    overflow: hidden; 
 
    padding-top: 50px; 
 
    background: url(../pics/home.jpg) no-repeat center; 
 
    background-size: cover; 
 
    color: rgb(207, 207, 207); 
 
} 
 

 
#wrapper { 
 
    text-align: center; 
 
    margin-top: 20%; 
 
} 
 

 
#wrapper h1{ 
 
    text-shadow: 2px 2px #000; 
 
} 
 

 
/* =============================================================================================== 
 
             Landing-Page-Menu 
 
    ===============================================================================================*/ 
 

 
.nationalpark-options{ 
 
    margin-top: 15px; 
 
    margin-left: -18px; 
 
    width: 647px; 
 
    text-shadow: none; 
 
} 
 

 
.activity-options{ 
 
    margin-top: 15px; 
 
    margin-left: -18px; 
 
    width: 326px; 
 
    text-shadow: none; 
 
} 
 

 
.dropdown-menu li{ 
 
    border-bottom: 1px solid black; 
 
} 
 

 
.dropdown-activity, .dropdown-ort, input[name="date"], .search{ 
 
    border:2px solid darkgrey; 
 
    border-right: none; 
 
    vertical-align: middle; 
 
    font-size: 12pt; 
 
    font-weight: bold; 
 
    padding-top: 10px; 
 
    padding-left: 15px; 
 
    list-style-type:none; 
 
    float: left; 
 
    width: 100%; 
 
    height: 50px; 
 
    color: white; 
 
    text-shadow: 2px 2px #000; 
 
} 
 

 
input[name="date"]{ 
 
    width: 65%; 
 
    color:black; 
 
    text-shadow: none; 
 
} 
 

 
.search{ 
 
    width: 20%; 
 
    border: none; 
 
} 
 

 

 
.dropdown-activity a, .dropdown-ort a{ 
 
    color: darkgrey; 
 
} 
 

 
.dropdown-arrow{ 
 
    float: right; 
 
    padding-right: 15px; 
 
    margin-top: -18px; 
 
} 
 

 
li.page-scroll.active{ 
 
    background: transparent; 
 
    border: 1px black solid; 
 

 
} 
 

 

 
/* =============================================================================================== 
 
             Banner 
 
    ===============================================================================================*/ 
 

 

 
.activity-box{ 
 
    background-color: rgb(0, 150, 64); 
 
    height: 100px; 
 
    margin-top: 184px; 
 
    margin-left: -50px; 
 
    vertical-align: middle; 
 
} 
 

 
.activity-section{ 
 
    margin-top: -15%; 
 
} 
 

 
/* =============================================================================================== 
 
             Group-Content 
 
    ===============================================================================================*/ 
 

 
.button-wrapper{ 
 
    margin-top: 60px; 
 
} 
 

 
#zurueck{ 
 
    border-right: 2px solid black; 
 
} 
 
#new-group{ 
 
    border-left: 2px solid black; 
 
    margin-left: -4px; 
 
} 
 

 
.group-wrapper{ 
 
    width: 100%; 
 
    height: 400px; 
 
    border: 1px solid grey; 
 
} 
 

 
.g1{ 
 
    width:23%; 
 
    max-width: 33%; 
 
    margin-top: 10%; 
 
    float:left; 
 
    margin-left: 10%; 
 
} 
 
.g2{ 
 
    width:23%; 
 
    max-width: 33%; 
 
    float: left; 
 
    margin-top: 10%; 
 
    margin-left: 5%; 
 
    margin-right: 5%; 
 
} 
 
.g3{ 
 
    width:23%; 
 
    max-width: 25%; 
 
    float:left; 
 
    margin-top: 10%; 
 
    margin-right: 10%; 
 
} 
 

 
.g1, .g2, .g3, .g4, .g5, .g6{ 
 
    border: 1px solid darkgrey; 
 
    list-style: none; 
 
    text-align: center; 
 
} 
 

 
.g1 a, .g2 a, .g3 a, .g4 a, .g5 a, .g6 a{ 
 
    color: black; 
 
} 
 

 
.g1 .dropdown-arrow, .g2 .dropdown-arrow, .g3 .dropdown-arrow, 
 
.g4 .dropdown-arrow, .g5 .dropdown-arrow, .g6 .dropdown-arrow{ 
 
    margin-top: 1px; 
 
} 
 

 
.g1 ul, .g2 ul, .g3 ul{ 
 
    width: 220px; 
 
} 
 
.g1 ul li{ 
 
    font-size: 0.72em; 
 
} 
 

 
.g3 .datepicker{ 
 
    height: auto; 
 
    width: 100%; 
 
    border: none; 
 
} 
 

 
.g4{ 
 
    width:23%; 
 
    max-width: 33%; 
 
    float:left; 
 
    margin-left: 10%; 
 
} 
 

 
.g5{ 
 
    width:23%; 
 
    max-width: 33%; 
 
    float: left; 
 
    margin-left: 5%; 
 
    margin-right: 5%; 
 
} 
 

 
.g6{ 
 
    width:23%; 
 
    max-width: 25%; 
 
    float:left; 
 
    margin-right: 10%; 
 
} 
 

 
.g4, .g5, .g6{ 
 
    margin-top: 10%; 
 
    float: left; 
 
} 
 

 
.row3{ 
 
    margin-top: 5%; 
 
    float: right; 
 
    margin-right: 11%; 
 
} 
 

 
/* =============================================================================================== 
 
             Sonstiges 
 
    ===============================================================================================*/ 
 

 

 
.about-section{ 
 
    height: auto !important; 
 
    min-height: 100%; 
 
    overflow: hidden; 
 
    padding-top: 50px; 
 
} 
 
.contact-section{ 
 
    height: auto !important; 
 
    min-height: 100%; 
 
    overflow: hidden; 
 
    padding-top: 50px; 
 
} 
 

 
/* =============================================================================================== 
 
             Bootstrap-überschreiben 
 
    ===============================================================================================*/ 
 

 

 
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a{ 
 
    background-image: none; 
 
    background-color: #5cb85c; 
 

 
} 
 

 
.col-md-2,.col-md-3, .col-md-6{ 
 
    padding-left: 0px; 
 
    padding-right: 0px; 
 

 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Our App</title> 
 
    <meta name="desciption" content="wba"> 
 
    <meta name="viewport" content="windth=device-width, inital-scale=1"> 
 
    <link rel="stylesheet" href="../bootstrap-3.3.5-dist/css/bootstrap.css"> 
 
    <link rel="stylesheet" href="../bootstrap-3.3.5-dist/css/bootstrap-theme.css"> 
 

 
    <link rel="stylesheet" href="../vitalets-bootstrap-datepicker-c7af15b/css/datepicker.css"> 
 
    <link rel="stylesheet" href="style/style.css"> 
 
</head> 
 
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> 
 

 

 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 

 
     <div class="navbar-header page-scroll"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 

 
      </button> 
 

 
      <a class="navbar-brand" rel="home" href="#home" title="Buy Sell Rent Everyting"> 
 
       <img style="max-width:100px; margin-top: -7px;" 
 
        src="pics/logo.png"> 
 
      </a> 
 
     </div> 
 
     <div class="collapse navbar-collapse" id="navbar-collapse"> 
 
      <ul class="nav navbar-nav"> 
 
       <li class="page-scroll"><a href="#home">Home</a></li> 
 
       <li class="dropdown"> 
 
        <a data-toggle="dropdown" class="dropdown-toggle" href="#">Aktivitäten <b class="caret"></b></a> 
 
        <ul role="menu" class="dropdown-menu page-scroll"> 
 
         <li><a href="#aktivitäten">Klettern</a></li> 
 
         <li><a href="#aktivitäten">Wandern</a></li> 
 
         <li><a href="#aktivitäten">Angeln</a></li> 
 
         <li><a href="#aktivitäten">Jagen</a></li> 
 
         <li><a href="#aktivitäten">Reiten</a></li> 
 
         <li><a href="#aktivitäten">Mountainbiking</a></li> 
 
         <li><a href="#aktivitäten">Kanu fahren</a></li> 
 
        </ul> 
 
       </li> 
 
       <li class="page-scroll"><a href="#nationalparks">Nationalparks</a></li> 
 
       <li class="page-scroll"><a href="#aktuelles">Aktuelles</a></li> 
 
       <li class="page-scroll"><a href="#unterkünfte">Unterkünfte</a></li> 
 

 
      </ul> 
 
     </div> 
 
    </div> 
 

 

 
</nav> 
 

 

 

 
<section id="home" class="home-section"> 
 
    <div id="wrapper"> 
 
     <h1>Finde deine Gruppe <br>und erlebt zusammen den Park</h1> 
 
     </div> 
 
</section> 
 

 
<section id="activity" class="activity-section"> 
 
<div class="clearfix"> 
 
    <div class="row"> 
 
     <div class="col-md-2 col-md-offset-3"> 
 
      <div class="dropdown-ort"> 
 
       Nationalpark 
 
       <li class="dropdown"> 
 
        <a data-toggle="dropdown" class="dropdown-toggle" href="#"><span class="glyphicon glyphicon-menu-down dropdown-arrow"></span> </a> 
 
        <ul role="menu" class="dropdown-menu page-scroll" id="nationalpark-options"> 
 
         <li><a href="#aktivitäten">Bayerischer Wald (BY)</a></li> 
 
         <li><a href="#aktivitäten">Berchtesgaden (BY)</a></li> 
 
         <li><a href="#aktivitäten">Schleswig-Holsteinisches Wattenmeer (SH)</a></li> 
 
         <li><a href="#aktivitäten">Niedersächsisches Wattenmeer (NI)</a></li> 
 
         <li><a href="#aktivitäten">Hamburgisches Wattenmeer (HH)</a></li> 
 
         <li><a href="#aktivitäten">Jasmund (MV)</a></li> 
 
         <li><a href="#aktivitäten">Müritz (MV)</a></li> 
 
         <li><a href="#aktivitäten">Sächsische Schweiz (SN)</a></li> 
 
         <li><a href="#aktivitäten">Unteres Odertal (BB)</a></li> 
 
         <li><a href="#aktivitäten">Vorpommersche Boddenlandschaft (MV)</a></li> 
 
         <li><a href="#aktivitäten">Hainich (TH)</a></li> 
 
         <li><a href="#aktivitäten">Eifel (NRW)</a></li> 
 
         <li><a href="#aktivitäten">Kellerwald-Edersee (HE)</a></li> 
 
         <li><a href="#aktivitäten">Harz (ST, NI)</a></li> 
 
         <li><a href="#aktivitäten">Schwarzwald (BW)</a></li> 
 
         <li style="border-bottom: none;"><a href="#aktivitäten">Hunsrück-Hochwald (SL, RP)</a></li> 
 
        </ul> 
 
       </li> 
 
      </div> 
 
      </div> 
 
     <div class="col-md-2"> 
 
       <div class="dropdown-activity"> 
 
        Aktivität 
 
        <li class="dropdown"> 
 
         <a data-toggle="dropdown" class="dropdown-toggle" href="#"><span id="dropdown-arrow" class="glyphicon glyphicon-menu-down dropdown-arrow"></span> </a> 
 
         <ul role="menu" class="dropdown-menu page-scroll" id="activity-options"> 
 
          <li><a href="#aktivitäten">Bayerischer Wald (BY)</a></li> 
 
          <li><a href="#aktivitäten">Berchtesgaden (BY)</a></li> 
 
          <li><a href="#aktivitäten">Schleswig-Holsteinisches Wattenmeer (SH)</a></li> 
 
          <li><a href="#aktivitäten">Niedersächsisches Wattenmeer (NI)</a></li> 
 
          <li><a href="#aktivitäten">Hamburgisches Wattenmeer (HH)</a></li> 
 
          <li><a href="#aktivitäten">Jasmund (MV)</a></li> 
 
          <li><a href="#aktivitäten">Müritz (MV)</a></li> 
 
          <li><a href="#aktivitäten">Sächsische Schweiz (SN)</a></li> 
 
          <li><a href="#aktivitäten">Unteres Odertal (BB)</a></li> 
 
          <li><a href="#aktivitäten">Vorpommersche Boddenlandschaft (MV)</a></li> 
 
          <li><a href="#aktivitäten">Hainich (TH)</a></li> 
 
          <li><a href="#aktivitäten">Eifel (NRW)</a></li> 
 
          <li><a href="#aktivitäten">Kellerwald-Edersee (HE)</a></li> 
 
          <li><a href="#aktivitäten">Harz (ST, NI)</a></li> 
 
          <li><a href="#aktivitäten">Schwarzwald (BW)</a></li> 
 
          <li style="border-bottom: none;"><a href="#aktivitäten">Hunsrück-Hochwald (SL, RP)</a></li> 
 
         </ul> 
 
        </li> 
 
       </div> 
 
     </div> 
 
     <div class="col-md-2"> 
 
      <input type="text" class="datepicker" name="date" placeholder="Datum auswählen"> 
 
      <button type="button" class="btn btn-success search"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
</section> 
 

 
<section class="activity-label"> 
 
    <div class="row"> 
 
     <div class="col-md-3 col-md-offset-3"> 
 
      <div id="aktivitäten" class="activity-box"> 
 
       <h1>Klettern</h1> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</section> 
 

 
<section class="groups"> 
 
    <div class="row"> 
 
     <div class="col-md-2 col-md-offset-3"> 
 
      <div class="button-wrapper"> 
 
       <button type="button" class="btn btn-success" id="zurueck">Zurück</button> 
 
       <button type="button" class="btn btn-warning" id="new-group">Neue Gruppe erstellen</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-md-6 col-md-offset-3"> 
 
      <div class="group-wrapper"> 
 
       <div class="row1"> 
 
        <div class="g1"> 
 
         <li class="dropdown"> 
 
          <a data-toggle="dropdown" class="dropdown-toggle" href="#">Nationalpark <span class="glyphicon glyphicon-menu-down dropdown-arrow"></span></a> 
 
          <ul role="menu" class="dropdown-menu page-scroll"> 
 
           <li><a href="#aktivitäten">Bayerischer Wald (BY)</a></li> 
 
           <li><a href="#aktivitäten">Berchtesgaden (BY)</a></li> 
 
           <li><a href="#aktivitäten">Schleswig-Holsteinisches Wattenmeer (SH)</a></li> 
 
           <li><a href="#aktivitäten">Niedersächsisches Wattenmeer (NI)</a></li> 
 
           <li><a href="#aktivitäten">Hamburgisches Wattenmeer (HH)</a></li> 
 
           <li><a href="#aktivitäten">Jasmund (MV)</a></li> 
 
           <li><a href="#aktivitäten">Müritz (MV)</a></li> 
 
           <li><a href="#aktivitäten">Sächsische Schweiz (SN)</a></li> 
 
           <li><a href="#aktivitäten">Unteres Odertal (BB)</a></li> 
 
           <li><a href="#aktivitäten">Vorpommersche Boddenlandschaft (MV)</a></li> 
 
           <li><a href="#aktivitäten">Hainich (TH)</a></li> 
 
           <li><a href="#aktivitäten">Eifel (NRW)</a></li> 
 
           <li><a href="#aktivitäten">Kellerwald-Edersee (HE)</a></li> 
 
           <li><a href="#aktivitäten">Harz (ST, NI)</a></li> 
 
           <li><a href="#aktivitäten">Schwarzwald (BW)</a></li> 
 
           <li style="border-bottom: none;"><a href="#aktivitäten">Hunsrück-Hochwald (SL, RP)</a></li> 
 
          </ul> 
 
         </li> 
 
        </div> 
 
        <div class="g2"> 
 
         <li class="dropdown"> 
 
          <a data-toggle="dropdown" class="dropdown-toggle" href="#">Nationalpark <span class="glyphicon glyphicon-menu-down dropdown-arrow"></span></a> 
 
          <ul role="menu" class="dropdown-menu page-scroll"> 
 
           <li><a href="#aktivitäten">Klettern</a></li> 
 
           <li><a href="#aktivitäten">Wandern</a></li> 
 
           <li><a href="#aktivitäten">Angeln</a></li> 
 
           <li><a href="#aktivitäten">Jagen</a></li> 
 
           <li><a href="#aktivitäten">Reiten</a></li> 
 
           <li><a href="#aktivitäten">Mountainbiking</a></li> 
 
           <li><a href="#aktivitäten">Kanu fahren</a></li> 
 
          </ul> 
 
         </li> 
 
        </div> 
 
         <div class="g3"> 
 
          <input type="text" class="datepicker" placeholder="Datum auswählen"> 
 
         </div> 
 
      </div> 
 
       <div class="row2"> 
 
        <div class="g4"> 
 
         <li class="dropdown"> 
 
          <a data-toggle="dropdown" class="dropdown-toggle" href="#">Nationalpark <span class="glyphicon glyphicon-menu-down dropdown-arrow"></span></a> 
 
          <ul role="menu" class="dropdown-menu page-scroll"> 
 
           <li><a href="#aktivitäten">Bayerischer Wald (BY)</a></li> 
 
           <li><a href="#aktivitäten">Berchtesgaden (BY)</a></li> 
 
           <li><a href="#aktivitäten">Schleswig-Holsteinisches Wattenmeer (SH)</a></li> 
 
           <li><a href="#aktivitäten">Niedersächsisches Wattenmeer (NI)</a></li> 
 
           <li><a href="#aktivitäten">Hamburgisches Wattenmeer (HH)</a></li> 
 
           <li><a href="#aktivitäten">Jasmund (MV)</a></li> 
 
           <li><a href="#aktivitäten">Müritz (MV)</a></li> 
 
           <li><a href="#aktivitäten">Sächsische Schweiz (SN)</a></li> 
 
           <li><a href="#aktivitäten">Unteres Odertal (BB)</a></li> 
 
           <li><a href="#aktivitäten">Vorpommersche Boddenlandschaft (MV)</a></li> 
 
           <li><a href="#aktivitäten">Hainich (TH)</a></li> 
 
           <li><a href="#aktivitäten">Eifel (NRW)</a></li> 
 
           <li><a href="#aktivitäten">Kellerwald-Edersee (HE)</a></li> 
 
           <li><a href="#aktivitäten">Harz (ST, NI)</a></li> 
 
           <li><a href="#aktivitäten">Schwarzwald (BW)</a></li> 
 
           <li style="border-bottom: none;"><a href="#aktivitäten">Hunsrück-Hochwald (SL, RP)</a></li> 
 
          </ul> 
 
         </li> 
 
        </div> 
 
        <div class="g5"> 
 
         <li class="dropdown"> 
 
          <a data-toggle="dropdown" class="dropdown-toggle" href="#">Nationalpark <span class="glyphicon glyphicon-menu-down dropdown-arrow"></span></a> 
 
          <ul role="menu" class="dropdown-menu page-scroll"> 
 
           <li><a href="#aktivitäten">Klettern</a></li> 
 
           <li><a href="#aktivitäten">Wandern</a></li> 
 
           <li><a href="#aktivitäten">Angeln</a></li> 
 
           <li><a href="#aktivitäten">Jagen</a></li> 
 
           <li><a href="#aktivitäten">Reiten</a></li> 
 
           <li><a href="#aktivitäten">Mountainbiking</a></li> 
 
           <li><a href="#aktivitäten">Kanu fahren</a></li> 
 
          </ul> 
 
         </li> 
 
        </div> 
 
        <div class="g6"> 
 
         <li class="dropdown"> 
 
          <a data-toggle="dropdown" class="dropdown-toggle" href="#">Nationalpark <span class="glyphicon glyphicon-menu-down dropdown-arrow"></span></a> 
 
          <ul role="menu" class="dropdown-menu page-scroll"> 
 
           <li><a href="#aktivitäten">Klettern</a></li> 
 
           <li><a href="#aktivitäten">Wandern</a></li> 
 
           <li><a href="#aktivitäten">Angeln</a></li> 
 
           <li><a href="#aktivitäten">Jagen</a></li> 
 
           <li><a href="#aktivitäten">Reiten</a></li> 
 
           <li><a href="#aktivitäten">Mountainbiking</a></li> 
 
           <li><a href="#aktivitäten">Kanu fahren</a></li> 
 
          </ul> 
 
         </li> 
 
        </div> 
 
       </div> 
 
       <div class="row3"> 
 
        <button type="button" class="btn btn-success" id="bestaetigen">Bestätigen</button> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
</section> 
 

 
<section id="nationalparks" class="about-section"> 
 
    Nationalparks 
 
</section> 
 

 
<section id="aktuelles" class="contact-section"> 
 
    Aktuelles 
 
</section> 
 

 
<section id="unterkünfte" class="contact-section"> 
 
    Unterkünfte 
 
</section> 
 

 

 
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
 

 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 
 
<script src="scroll-nav.js"></script> 
 
<script src="content_jquery.js"></script> 
 
<script src="../bootstrap-3.3.5-dist/js/bootstrap.min.js"></script> 
 
<script src="../vitalets-bootstrap-datepicker-c7af15b/js/bootstrap-datepicker.js"></script> 
 
<script src="../vitalets-bootstrap-datepicker-c7af15b/js/locales/bootstrap-datepicker.de.js"></script> 
 

 
</body> 
 
</html>

这是什么样子： http://www.directupload.net/file/d/4096/ztgt2d8h_jpg.htm

，所以我只是想获得右侧摆脱了空白的那不知何故造成的导航栏

来源

2015-08-30 Lukas S

你应该在你的导航栏中发布剩余的HTML，因为这些问题与导航无关。 – vanburen

ive更新了帖子.. .now theres我的完整html和css –

Cre用这条线吃掉你的CSS文件来隐藏不需要的空间。

body { 
    overflow-x:hidden; 
}

来源

2015-08-30 22:47:54 Dirquez

谢谢，但它只修复了x滚动条。通过滑动或滚动到右侧仍然可见 –

真正的救生员！一直在挣扎。感谢您的贡献 – Cortifero

下面是一个示例布局（对于起点），它可能有帮助，因为它试图保持与Bootstrap约定内联。

或者，您可以尝试用container或container-fluid类包装您的内容并相应地调整您的CSS。

$(document).ready(function() { 
 
    $('a[href*=#]:not([href=#])').click(function() { 
 
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { 
 
     var target = $(this.hash); 
 
     target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); 
 
     if (target.length) { 
 
     $('html,body').animate({ 
 
      scrollTop: target.offset().top - 50 
 
     }, 1000); 
 
     return false; 
 
     } 
 
    } 
 
    }); 
 
});

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    max-width: 100%; 
 
    font-family: Arial; 
 
} 
 
body { 
 
    margin-top: 50px; 
 
} 
 
.clearfix:before, 
 
.clearfix:after { 
 
    content: " "; 
 
    display: table; 
 
} 
 
.clearfix:after { 
 
    clear: both; 
 
} 
 
.clearfix { 
 
    *zoom: 1; 
 
} 
 
.navbar-default.affix { 
 
    margin: auto; 
 
    right: 0; 
 
    left: 0; 
 
    transition: all .6s ease-in-out; 
 
} 
 
.home-section { 
 
    height: 500px; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    background: url(http://students.marshall.usc.edu/undergrad/files/2014/09/berlin-1024x575.jpg) no-repeat center center; 
 
    background-size: cover; 
 
    color: rgb(207, 207, 207); 
 
    text-align: center; 
 
} 
 
#search-form { 
 
    margin-top: 200px; 
 
} 
 
#search-form .form-control, 
 
#search-form .btn { 
 
    height: 50px; 
 
} 
 
.input-group-btn .drop-button { 
 
    border-radius: 0; 
 
    border-right: 0; 
 
} 
 
fieldset.fieldset-border { 
 
    border: 1px groove #ddd; 
 
    padding: 15px; 
 
    -webkit-box-shadow: 0px 0px 0px 0px #000; 
 
    box-shadow: 0px 0px 0px 0px #000; 
 
    margin-bottom: 20px; 
 
} 
 
.well.well-green { 
 
    background-color: rgb(0, 150, 64); 
 
    border-radius: 0; 
 
    margin-top: 20px; 
 
} 
 
.well.well-block { 
 
    background-color: rgb(255, 255, 255, 0.95); 
 
    border-radius: 0; 
 
    height: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top" data-offset="50"> 
 
    <nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 
     <div class="navbar-header page-scroll"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 

 
     </button> 
 
     <a class="navbar-brand" rel="home" href="#" title="Buy Sell Rent Everyting"> 
 
      <img src="http://placehold.it/100x20/fff/fff"> 
 
     </a> 
 

 
     </div> 
 
     <div class="collapse navbar-collapse" id="navbar-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
      <li class="page-scroll"><a href="#">Home</a> 
 

 
      </li> 
 
      <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Aktivitäten <b class="caret"></b></a> 
 

 
      <ul role="menu" class="dropdown-menu page-scroll"> 
 
       <li><a href="#aktivitäten">Klettern</a> 
 

 
       </li> 
 
       <li><a href="#aktivitäten">Wandern</a> 
 

 
       </li> 
 
       <li><a href="#aktivitäten">Angeln</a> 
 

 
       </li> 
 
       <li><a href="#aktivitäten">Jagen</a> 
 

 
       </li> 
 
       <li><a href="#aktivitäten">Reiten</a> 
 

 
       </li> 
 
       <li><a href="#aktivitäten">Mountainbiking</a> 
 

 
       </li> 
 
       <li><a href="#aktivitäten">Kanu fahren</a> 
 

 
       </li> 
 
      </ul> 
 
      </li> 
 
      <li class="page-scroll"><a href="#nationalparks">Nationalparks</a> 
 

 
      </li> 
 
      <li class="page-scroll"><a href="#aktuelles">Aktuelles</a> 
 

 
      </li> 
 
      <li class="page-scroll"><a href="#unterkünfte">Unterkünfte</a> 
 

 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </nav> 
 
    <div class="home-section"> 
 
    <div class="container"> 
 
     <form class="form-horizontal" id="search-form"> 
 
     <div class="input-group"> 
 
      <div class="input-group-btn"> 
 
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Nationalpark <span class="caret"></span> 
 

 
      </button> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#aktivitäten">Bayerischer Wald (BY)</a> 
 

 
       </li> 
 
       <li><a href="#aktivitäten">Berchtesgaden (BY)</a> 
 

 
       </li> 
 
       <li><a href="#aktivitäten">Schleswig-Holsteinisches Wattenmeer (SH)</a> 
 

 
       </li> 
 
       <li><a href="#aktivitäten">Niedersächsisches Wattenmeer (NI)</a> 
 

 
       </li> 
 
       <li><a href="#aktivitäten">Hamburgisches Wattenmeer (HH)</a> 
 

 
       </li> 
 
       <li><a href="#aktivitäten">Jasmund (MV)</a> 
 

 
       </li> 
 
       <li><a href="#aktivitäten">Müritz (MV)</a> 
 

 
       </li> 
 
       <li><a href="#aktivitäten">Sächsische Schweiz (SN)</a> 
 

 
       </li> 
 
       <li><a href="#aktivitäten">Unteres Odertal (BB)</a> 
 

 
       </li> 
 
       <li><a href="#aktivitäten">Vorpommersche Boddenlandschaft (MV)</a> 
 

 
       </li> 
 
       <li><a href="#aktivitäten">Hainich (TH)</a> 
 

 
       </li> 
 
       <li><a href="#aktivitäten">Eifel (NRW)</a> 
 

 
       </li> 
 
       <li><a href="#aktivitäten">Kellerwald-Edersee (HE)</a> 
 

 
       </li> 
 
       <li><a href="#aktivitäten">Harz (ST, NI)</a> 
 

 
       </li> 
 
       <li><a href="#aktivitäten">Schwarzwald (BW)</a> 
 

 
       </li> 
 
       <li style="border-bottom: none;"><a href="#aktivitäten">Hunsrück-Hochwald (SL, RP)</a> 
 

 
       </li> 
 
      </ul> 
 
      </div> 
 
      <div class="input-group-btn"> 
 
      <button type="button" class="btn btn-default dropdown-toggle drop-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Aktivität <span class="caret"></span> 
 

 
      </button> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#aktivitäten">Bayerischer Wald (BY)</a> 
 

 
       </li> 
 
       <li><a href="#aktivitäten">Berchtesgaden (BY)</a> 
 

 
       </li> 
 
       <li><a href="#aktivitäten">Schleswig-Holsteinisches Wattenmeer (SH)</a> 
 

 
       </li> 
 
       <li><a href="#aktivitäten">Niedersächsisches Wattenmeer (NI)</a> 
 

 
       </li> 
 
       <li><a href="#aktivitäten">Hamburgisches Wattenmeer (HH)</a> 
 

 
       </li> 
 
       <li><a href="#aktivitäten">Jasmund (MV)</a> 
 

 
       </li> 
 
       <li><a href="#aktivitäten">Müritz (MV)</a> 
 

 
       </li> 
 
       <li><a href="#aktivitäten">Sächsische Schweiz (SN)</a> 
 

 
       </li> 
 
       <li><a href="#aktivitäten">Unteres Odertal (BB)</a> 
 

 
       </li> 
 
       <li><a href="#aktivitäten">Vorpommersche Boddenlandschaft (MV)</a> 
 

 
       </li> 
 
       <li><a href="#aktivitäten">Hainich (TH)</a> 
 

 
       </li> 
 
       <li><a href="#aktivitäten">Eifel (NRW)</a> 
 

 
       </li> 
 
       <li><a href="#aktivitäten">Kellerwald-Edersee (HE)</a> 
 

 
       </li> 
 
       <li><a href="#aktivitäten">Harz (ST, NI)</a> 
 

 
       </li> 
 
       <li><a href="#aktivitäten">Schwarzwald (BW)</a> 
 

 
       </li> 
 
       <li style="border-bottom: none;"><a href="#aktivitäten">Hunsrück-Hochwald (SL, RP)</a> 
 

 
       </li> 
 
      </ul> 
 
      </div> 
 
      <!-- /btn-group --> 
 
      <!-- /btn-group --> 
 
      <input type="text" class="form-control datepicker" name="date" placeholder="Datum auswählen"><span class="input-group-btn"> 
 
     <button type="button" class="btn btn-success search"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> 
 
      </span> 
 
     </div> 
 
     <!-- /input-group --> 
 
     </form> 
 
     <h1>Finde deine Gruppe <br>und erlebt zusammen den Park</h1> 
 

 
    </div> 
 
    </div> 
 
    <div class="container"> 
 
    <div id="aktivitäten" class="well well-green"> 
 
     <h1>Klettern</h1> 
 

 
    </div> 
 
    <div class="row"> 
 
     <div class="col-sm-12"> 
 
     <div class="form-group"> 
 
      <button type="button" class="btn btn-success" id="zurueck">Zurück</button> 
 
      <button type="button" class="btn btn-warning" id="new-group">Neue Gruppe erstellen</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <fieldset class="fieldset-border"> 
 
     <form id="park-form"> 
 
     <div class="row"> 
 
      <div class="col-sm-4"> 
 
      <div class="form-group"> 
 
       <div class="btn-group"> 
 
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Nationalpark <span class="caret"></span> 
 

 
       </button> 
 
       <ul role="menu" class="dropdown-menu page-scroll"> 
 
        <li><a href="#aktivitäten">Bayerischer Wald (BY)</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Berchtesgaden (BY)</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Schleswig-Holsteinisches Wattenmeer (SH)</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Niedersächsisches Wattenmeer (NI)</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Hamburgisches Wattenmeer (HH)</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Jasmund (MV)</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Müritz (MV)</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Sächsische Schweiz (SN)</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Unteres Odertal (BB)</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Vorpommersche Boddenlandschaft (MV)</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Hainich (TH)</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Eifel (NRW)</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Kellerwald-Edersee (HE)</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Harz (ST, NI)</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Schwarzwald (BW)</a> 
 

 
        </li> 
 
        <li style="border-bottom: none;"><a href="#aktivitäten">Hunsrück-Hochwald (SL, RP)</a> 
 

 
        </li> 
 
       </ul> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <div class="col-sm-4"> 
 
      <div class="form-group"> 
 
       <div class="btn-group"> 
 
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Nationalpark <span class="caret"></span> 
 

 
       </button> 
 
       <ul role="menu" class="dropdown-menu page-scroll"> 
 
        <li><a href="#aktivitäten">Klettern</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Wandern</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Angeln</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Jagen</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Reiten</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Mountainbiking</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Kanu fahren</a> 
 

 
        </li> 
 
       </ul> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <div class="col-sm-4"> 
 
      <div class="form-group"> 
 
       <input type="text" class="form-control datepicker" placeholder="Datum auswählen"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-sm-4"> 
 
      <div class="form-group"> 
 
       <div class="btn-group"> 
 
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Nationalpark <span class="caret"></span> 
 

 
       </button> 
 
       <ul role="menu" class="dropdown-menu page-scroll"> 
 
        <li><a href="#aktivitäten">Bayerischer Wald (BY)</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Berchtesgaden (BY)</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Schleswig-Holsteinisches Wattenmeer (SH)</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Niedersächsisches Wattenmeer (NI)</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Hamburgisches Wattenmeer (HH)</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Jasmund (MV)</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Müritz (MV)</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Sächsische Schweiz (SN)</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Unteres Odertal (BB)</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Vorpommersche Boddenlandschaft (MV)</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Hainich (TH)</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Eifel (NRW)</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Kellerwald-Edersee (HE)</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Harz (ST, NI)</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Schwarzwald (BW)</a> 
 

 
        </li> 
 
        <li style="border-bottom: none;"><a href="#aktivitäten">Hunsrück-Hochwald (SL, RP)</a> 
 

 
        </li> 
 
       </ul> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <div class="col-sm-4"> 
 
      <div class="form-group"> 
 
       <div class="btn-group"> 
 
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Nationalpark <span class="caret"></span> 
 

 
       </button> 
 
       <ul role="menu" class="dropdown-menu page-scroll"> 
 
        <li><a href="#aktivitäten">Klettern</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Wandern</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Angeln</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Jagen</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Reiten</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Mountainbiking</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Kanu fahren</a> 
 

 
        </li> 
 
       </ul> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <div class="col-sm-4"> 
 
      <div class="form-group"> 
 
       <div class="btn-group"> 
 
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Nationalpark <span class="caret"></span> 
 

 
       </button> 
 
       <ul role="menu" class="dropdown-menu page-scroll"> 
 
        <li><a href="#aktivitäten">Klettern</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Wandern</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Angeln</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Jagen</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Reiten</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Mountainbiking</a> 
 

 
        </li> 
 
        <li><a href="#aktivitäten">Kanu fahren</a> 
 

 
        </li> 
 
       </ul> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-4"> 
 
      <div class="row"> 
 
      <button type="button" class="btn btn-success" id="bestaetigen">Bestätigen</button> 
 
      </div> 
 
     </div> 
 
     </form> 
 
    </fieldset> 
 
    <section id="nationalparks" class="well well-block"> 
 
     <h3>Nationalparks</h3> 
 

 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
 
     It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with 
 
     desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    </section> 
 
    <section id="aktuelles" class="well well-block"> 
 
     <h3>Aktuelles</h3> 
 

 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
 
     It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with 
 
     desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    </section> 
 
    <section id="unterkünfte" class="well well-block"> 
 
     <h3>Unterkünfte</h3> 
 

 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
 
     It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with 
 
     desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    </section> 
 
    </div> 
 
</body>

来源

2015-09-01 17:26:16 vanburen

编辑：

我解决了这个。感谢vanburen先前的评论：“这个问题很有可能与导航毫无关系”。我的问题是页面下方的表单标签，它被设置为“视觉隐藏”。其他标签我已经设置显示：块，所以我可以设置宽度，但视觉隐藏停止标签被包含在它的父母。（仍然充当内联元素）。

所以，如果它可以帮助任何人，这可能与导航栏无关。找到可能导致问题的简单方法是在每个元素上设置边框，例如：* {border：1px solid red}这应该揭示罪魁祸首。最有可能是内联元素。

来源

2017-02-26 02:23:04

就像什么贾里德说，向下跌破我的HTML有一个与宽度20rem这使得它溢出（设备全宽为300像素，但20rem它本身转化为335px）

所以，可以肯定的标签逐个检查您的元素。这个问题可能不是由导航栏本身引起的

来源

2017-10-19 13:40:24 grandia

Bootstrap导航栏宽度大于视口

回答

相关问题