html - How to remove this horizontal scrollbar in Bootstrap 3 -
i've got irritating horizontal scroll on bootstrap page. can't figure out making behave or it?
jsfiddle link: http://jsfiddle.net/fatalbert/cd1syrd9/2/
html:
<body> <div class="wrapper"> <div class="row"> <div class="header"> <div class="container"> <!-- navigation--> <nav class="navbar navbar-default"> <div class="container-fluid"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">meny</button> <a class="navbar-brand" href="#"><img src="xxx" /></a> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">start <span class="sr-only">(current)</span></a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> </ul> </div> </div> </nav><!-- / navigation--> </div> </div><!-- / header--> </div><!-- / container--> <div class="row"> <div class="first-page-content"> <div class="container"> <img class="img-responsive img-big" src="xx" /> <p> lorem ipsum dolor sit amet, arcu nulla. maecenas congue, felis leo et, pulvinar sollicitudin lacinia libero rhoncus, nam dolor, velit leo ullamcorper massa. risus netus facilisis tempus mollis, nullam nibh ridiculus potenti donec pulvinar proin. sit in ultrices sed orci pellentesque, nunc tempor fusce fusce ultrices felis molestie. lorem nam pellentesque integer urna nam. </p> </div> </div> </div><!--/first-content--> </div> <div class="footer"> <div class="container"> <p class="pull-right"> some<br /> info<br /> </p> </div> </div><!-- /footer--> </body> css:
html { position: relative; min-height: 100%; } body { margin-bottom: 160px; } h1 { font-size: 2.5em; } h2 { font-size: 1.5em; } p { font-family: verdana,arial,sans-serif; font-size: 1.05em; line-height: 1.8; text-align: justify; } { color: #0071bb; font-weight: bold; } .wrapper { } .footer { position: absolute; padding-top: 25px; bottom: 0; width: 100%; /* set fixed height of footer here */ height: 160px; background-color: #5fc8ff; } .header .glyphicon-wrench { margin: 0 3px; } .header h4 { margin-right: 3px; } .img-responsive { display: block; margin: auto; } .img-responsive.img-big { margin-top: 75px; } .navbar { border: none; } .navbar .navbar-nav { display: inline-block; float: none; vertical-align: top; } .navbar .navbar-collapse { text-align: center; } .navbar-default .navbar-nav > li { width: 150px; margin-right: 2px; } .navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > li > a:hover { color: #fff; font-weight: bold; background-color: #92c7e1; } .navbar-default .navbar-nav > li > a:hover { background-color: #98cee5; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #fff; background-color: #98cee5; } a.navbar-brand { padding: 5px; } .row { } .alert { } .well { } .footer p { font-weight: bold; color: #fdfdfb; } @media (min-width: 992px) { } @media (min-width: 768px) { .first-page-content p { margin: 75px auto 25px auto; width: 524px; } }
as per bootstrap 3 documentation:
rows must placed within .container (fixed-width) or .container-fluid (full-width) proper alignment , padding.
therefore, add class container .wrapper element.
<div class="wrapper container"> <div class="row"> ... </div> </div> as explanation, .row class has -15px margins on each side.
.row { margin-right: -15px; margin-left: -15px; } the .container class displaces following:
.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } in addition reading bootstrap 3 docs, i'd suggest reading article "the subtle magic behind why bootstrap 3 grid works".
Comments
Post a Comment