CSS Bootstrap 3 流体容器不是 100% 宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24970353/
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
Bootstrap 3 fluid container not 100% width
提问by ahnbizcad
The issue
问题
I am thinking about implementing Bootstrap 3 into my project and I am testing out some of its functionalities and properties before switching to this front-end framework.
我正在考虑在我的项目中实施 Bootstrap 3，并且在切换到这个前端框架之前我正在测试它的一些功能和属性。
The weird thing I noticed is that a fluid Bootstrap container doesn't actually span 100% of the viewport width (notice the 1px line on the right of the pink Bootstrap element):
我注意到的奇怪的事情是流体 Bootstrap 容器实际上并没有跨越 100% 的视口宽度（注意粉红色 Bootstrap 元素右侧的 1px 线）：
This is what my HTML looks like. It's basically the default Bootstrap template.
这就是我的 HTML 的样子。它基本上是默认的 Bootstrap 模板。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page title</title>
<link rel="stylesheet" href="css/bootstrap.css"> <!-- Core CSS -->
<link rel="stylesheet" href="css/test.css"> <!-- Custom CSS -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="full-width">This is not bootstrap</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
This is Bootstrap
</div>
<div class="col-md-9">
This is Bootstrap too
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Obviously I use the standard, latest CSS version of bootstrap and my own custom CSS:
显然我使用标准的、最新的 CSS 版本的引导程序和我自己的自定义 CSS：
.full-width {
width: 100%;
background-color: #808080;
}
.col-md-3 {
background-color: #4f4;
}
.col-md-9 {
background-color: #f4f;
}
Why isn't this fluid container spanning 100% of the width? Although it's just 1px it will definitely break up my page design.
为什么这个流体容器不是 100% 的宽度？虽然它只是 1px，但它肯定会破坏我的页面设计。
Issue recreation
问题娱乐
I created a jsfiddle on request concerning this issue: http://jsfiddle.net/J6UE5
我根据有关此问题的请求创建了一个 jsfiddle：http: //jsfiddle.net/J6UE5
To recreate my issue resize the viewport using Safari (7.0.5) on a Mac running OS X 10.9.4. You'll notice the 1px line on the right side of the pink container appearing and disappearing while resizing. Once the green and pink container are stacked (Bootstrap behavior) the 1px line disappears and everything is 100% width.
要重新创建我的问题，请在运行 OS X 10.9.4 的 Mac 上使用 Safari (7.0.5) 调整视口大小。您会注意到粉红色容器右侧的 1px 线在调整大小时出现和消失。一旦绿色和粉红色容器堆叠起来（引导行为），1px 线就会消失，所有东西都是 100% 宽度。
回答by ahnbizcad
.containerelement adds padding of 15px in Bootstrap.
.container元素在 Bootstrap 中添加 15px 的填充。
.rowhas negative left and right margins of 15px, and
.row具有 15px 的负左右边距，并且
.columnhas 15px padding.
.column有 15px 填充。
Override the containers padding values in your CSS (and make sure to place them after your boostrap code so it properly overwrites).
覆盖 CSS 中的容器填充值（并确保将它们放在 boostrap 代码之后，以便正确覆盖）。
.container {
padding: 0px;
}
More explanation on how containers, container-fluids, rows, and columns work here
关于容器、容器流体、行和列如何工作的更多解释在这里
http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works
http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works
回答by K.Raj.
Have you added this line in your custom css file !
您是否在自定义 css 文件中添加了这一行！
body {
width: 100%;
margin: 0%;
}
/***********************************************************************************/
/ ***************************************************** **************************************/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page title</title>
<link rel="stylesheet" href="css/bootstrap.css"> <!-- Core CSS -->
<link rel="stylesheet" href="css/test.css"> <!-- Custom CSS -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
.full-width {
max-width:100%;
top:0;
left:0;
min-height: 100%;
min-width: 1024px;
background-color: #808080;
}
.col-md-3 {
background-color: #4f4;
}
.col-md-9 {
background-color: #f4f;
}
body {
width: 100%;
margin: 0%;
}
}
</style>
</head>
<body>
<div class="full-width">This is not bootstrap</div>
<div class="container-fluid">
<div class="col-md-12">
<div class="row">
<div class="col-md-3">
This is Bootstrap
</div>
<div class="col-md-9">
This is Bootstrap too
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
回答by Ray Sam
<div class="row" style="margin-left: -30px; padding: 0px; background-color: rgba(255, 3, 53, 0.49);">
<div class="col-lg-12">
<p style="color: green;">Foo</p>
</div>
</div>
回答by Bosc
trying to recreate that issue and cannot seem to
试图重现该问题，但似乎无法
try change the bootstrap css, bootstrap.css to bootstrap.min.css
尝试将 bootstrap css bootstrap.css 更改为 bootstrap.min.css
edit: are there any other css files you are pulling in a quick http://www.bootply.com/OOpfKfAAMhshows its working fine, no 1px white space on the side
编辑：是否有任何其他 css 文件您正在快速拉入http://www.bootply.com/OOpfKfAAMh显示其工作正常，侧面没有 1px 空白
回答by Asfack Ahamed
.container-fluid {
padding-right:0;padding-left:0;
margin-right:-15px;margin-left:-15px
}
