Bootstrap导航栏宽度大于视口

时间:2015-08-30 22:15:21

标签: html twitter-bootstrap

我的导航栏比内容大。试图通过点击抛出浏览器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

所以我只是想摆脱右侧的空白,这是由导航栏引起的

5 个答案:

答案 0 :(得分:4)

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

body {
  overflow-x:hidden;
}

答案 1 :(得分:1)

编辑:

我解决了这个问题。感谢vanburen先前的评论:&#34;这个问题很可能与导航无关。&#34;。我的问题是页面下方的表单标签,其设置为“视觉隐藏”。我设置显示的其他标签:阻止所以我可以设置宽度,但视觉上隐藏的是阻止标签包含在其父母的内部。 (仍然作为内联元素)。

所以,如果它对其他人有帮助,那可能与导航栏无关。找到可能导致问题的原因的一种简单方法是在每个元素上设置边框,例如:* {border:1px solid red}这应该揭示罪魁祸首。很可能是一个内联元素。

答案 2 :(得分:1)

就像Jared所说的那样,在我的HTML下面有一个宽度为20rem的标签,它会溢出(设备全宽为300px,但是20rem它将自身转换为335px)

因此,请务必逐一检查您的元素。问题可能不是由导航栏本身引起的

答案 3 :(得分:0)

这是一个示例布局(起点)可能有用,因为它试图保持与Bootstrap约定内联。

或者,您可以尝试使用containercontainer-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>

答案 4 :(得分:0)

将以下内容添加到 content 属性的值 - user-scalable=no

最终的元标记应如下所示:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />