Lukas S
Reputation: 335
Bootstrap navbar width larger than viewport
My navbar is larger than the content. Tried to get the problem by clicking threw the browser css, but nothing ist working. I havent changed anything on bootstrap itself nor have i overwritten something thats in relation with the navbar.
My 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>This is what it looks like: http://www.directupload.net/file/d/4096/ztgt2d8h_jpg.htm
So i just want to get rid of the whitespace on the right side that is somehow caused by the navbar
Upvotes: 2
Views: 9724
Answers (4)
grandia
Reputation: 737
Just like what Jared said, down below in my HTML there is a tag with width 20rem which makes it overflow (device full width is 300px, but with 20rem it translate itself to 335px)
So, be sure to check your element one by one. The problem might not be caused by the navbar itself
Upvotes: 1
Jared Pogson
Reputation: 41
Edit:
I solved this. Thanks to the earlier comment from vanburen: "There is a good chance the problem has nothing to do with the navigation". My issue was a form label further down the page which was set as 'visually-hidden'. Other Labels I had set to display: block so I could set the width, but the visually hidden was stopping the label being contained inside it's parent. (Still acting as an inline element).
So, If it helps anyone else, it is probably nothing to do with the navbar. An easy way to find what might be causing the problem is to set a border on every element e.g: *{border: 1px solid red} That should reveal the culprit. Most likely an inline element.
Upvotes: 4
vanburen
Reputation: 21663
Here's an example layout (for a starting point) that may work help since it attempts to remain inline with Bootstrap conventions.
Alternatively you could try wrapping your content with a container or container-fluid class and adjust your CSS accordingly.
$(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>Upvotes: 0
Givenchdy
Reputation: 95
Create your CSS file with this line to hide the unwanted space.
body {
overflow-x:hidden;
}
Upvotes: 7
Related Questions
- Bootstrap 3: Navbar not full width
- Bootstrap navbar 100% width not working
- Navbar not filling full screen
- Cannot Get Navbar to stretch across screen
- How do I make the navbar full width on narrow viewports?
- Bootstrap navbar width issue
- Bootstrap Navbar Too Large for Page
- The navbar does not get all the width of the page
- navbar width automatically becoming 5px or so bigger than the body somehow....?
- navbar not 100% width when browser is resized bootstrap 3.5