html - Bootstrap 导航栏宽度大于视口(viewport)

Question

我的导航栏比内容大。试图通过单击抛出浏览器 css 来解决问题，但没有任何效果。我没有更改 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

所以我只想去掉右侧由导航栏引起的空白

Answer 1

使用此行创建您的 CSS 文件以隐藏不需要的空间。

body {
  overflow-x:hidden;
}