12 css containers width fluid-layout twitter-bootstrap
我正在考虑将Bootstrap 3实现到我的项目中,并且在切换到这个前端框架之前,我正在测试它的一些功能和属性.
我注意到的一个奇怪的事情是,流体Bootstrap容器实际上并不跨越视口宽度的100%(请注意粉红色Bootstrap元素右侧的1px行):
图片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%宽度.
ahn*_*cad 16
.container element在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>