我的 Bootstrap 页面上有这个令人讨厌的水平滚动条。无法弄清楚是什么让它表现得像这样或该怎么办？
JsFiddle 链接: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;
}
a {
color: #0071BB;
font-weight: bold;
}
.wrapper {
}
.footer {
position: absolute;
padding-top: 25px;
bottom: 0;
width: 100%;
/* Set the fixed height of the 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;
}
}
最佳答案
根据 Bootstrap 3 documentation :
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
因此，将 container 类添加到您的 .wrapper 元素中。
<div class="wrapper container">
<div class="row">
...
</div>
</div>
至于解释，.row 类在每一边都有 -15px 边距。
.row {
margin-right: -15px;
margin-left: -15px;
}
.container 类用以下内容有效地取代了它:
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
除了阅读 Bootstrap 3 docs ，我建议阅读文章“The Subtle Magic Behind Why the Bootstrap 3 Grid Works”。
关于html - 如何在 Bootstrap 3 中删除这个水平滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27758457/