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導航欄寬度大於視口

回答

相關問題