我正在考虑将Bootstrap 3实现到我的项目中，并且在切换到这个前端框架之前，我正在测试它的一些功能和属性。
我注意到的一个奇怪的事情是，流体Bootstrap容器实际上并不跨越视口宽度的100％（请注意粉红色Bootstrap元素右侧的1px行）：
image http://i58.tinypic.com/29lzrwl.png
这就是我的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>
显然我使用标准的，最新的CSS版本的bootstrap和我自己的自定义CSS：
.full-width {
width: 100%;
background-color: #808080;
}
.col-md-3 {
background-color: #4f4;
}
.col-md-9 {
background-color: #f4f;
}
为什么这个流体容器不能跨越100％的宽度？虽然它只是1px，但它肯定会破坏我的页面设计。
我根据要求创建了一个jsfiddle：http://jsfiddle.net/J6UE5
要重新创建我的问题，请在运行OS X 10.9.4的Mac上使用Safari（7.0.5）调整视口大小。您会注意到粉红色容器右侧的1px线出现并在调整大小时消失。一旦绿色和粉红色容器堆叠（Bootstrap行为），1px线消失，一切都是100％宽度。
.container元素在Bootstrap中添加了15px的填充。
.row的左右边距为负15px，而且
.column有15px填充。
覆盖CSS中的容器填充值（并确保将它们放在boostrap代码之后，以便正确覆盖）。
.container {
padding: 0px;
}
有关容器，容器 - 流体，行和列如何在此处工作的更多说明
http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works
您是否在自定义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>
试图重现这个问题，似乎无法做到
尝试将bootstrap css，bootstrap.css更改为bootstrap.min.css
编辑：有没有任何其他css文件你快速http://www.bootply.com/OOpfKfAAMh显示其工作正常，侧面没有1px的空白区域
<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>
.container-fluid {
padding-right:0;padding-left:0;
margin-right:-15px;margin-left:-15px
}