Html 如何在 Bootstrap 3 中删除这个水平滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27758457/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove this horizontal scrollbar in Bootstrap 3
提问by FatAlbert
I've got this irritating horizontal scroll on my bootstrap page. Can't figure out what is making it behave like this or what to do about it?
我的引导程序页面上有这个令人讨厌的水平滚动条。无法弄清楚是什么让它表现得像这样或该怎么办？
JsFiddle link: http://jsfiddle.net/FatAlbert/cd1syrd9/2/
JsFiddle 链接：http: //jsfiddle.net/FatAlbert/cd1syrd9/2/
HTML:
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:
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;
}
}
回答by Josh Crozier
As per Bootstrap 3 documentation:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
行必须放置在 .container（固定宽度）或 .container-fluid（全宽）中，以便正确对齐和填充。
Therefore, add the class containerto your .wrapperelement.
因此，将该类添加container到您的.wrapper元素中。
<div class="wrapper container">
<div class="row">
...
</div>
</div>
As for an explanation, the .rowclass has -15pxmargins on each side.
至于解释，.row类-15px在每一边都有边距。
.row {
margin-right: -15px;
margin-left: -15px;
}
The .containerclass effectively displaces that with the following:
本.container类有效地以下列取代：
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
In addition to reading the Bootstrap 3 docs, I'd suggest reading the article "The Subtle Magic Behind Why the Bootstrap 3 Grid Works".
除了阅读Bootstrap 3 文档之外，我还建议阅读文章“ Bootstrap 3 Grid Works 背后的微妙魔法”。
回答by vasanth
Just copy this code to your CSS, it will disable your horizontal scroll bar.
只需将此代码复制到您的 CSS，它将禁用您的水平滚动条。
body {overflow-x: hidden;}
回答by huseyin39
Writing:
写作：
html, body {
max-width: 100%;
overflow-x: hidden;
}
in your CSS, is a way to solve this issue
在您的 CSS 中，是解决此问题的一种方法
回答by calceamenta
In my case, I had one container-fluid class div tagin another container-fluid class div tag. Removing one of them fixed the issue.
就我而言，我在另一个container-fluid class div tag中有一个container-fluid class div tag。删除其中一个解决了这个问题。
回答by Mohamed SYLLA
Copy and paste this in CSS code
复制并粘贴到 CSS 代码中
html, body {
overflow-x: hidden;
}
回答by Luat Nguyen
Try this! It works for me.
尝试这个！这个对我有用。
.col-12{
padding-right: 0!important;
padding-left: 0!important;
}
.row{
margin-right: 0px;
margin-left: 0px;
}
回答by Shyam Nath
The issue is basically caused due to the parent .container is missing. The solution is that you can add a .no-container class to the row and add margin: 0 to compensate the negative margin of the row class.
该问题基本上是由于缺少父 .container 引起的。解决办法是，你可以在行中添加一个 .no-container 类并添加 margin: 0 来补偿行类的负边距。
See the below CSS and HTML markup code:
请参阅以下 CSS 和 HTML 标记代码：
.no-container {
margin-left: 0 !important;
margin-right: 0 !important;
}
.row {
border: 1px solid #999;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!--<div class="container"> Container is commented -->
<div class="row no-container">
<div class="col-md-6 col-xs-6 col-sm-6">column-6</div>
<div class="col-md-6 col-xs-6 col-sm-6">column-6</div>
</div>
<!--</div> Container ends here -->