100％宽度的Twitter Bootstrap 3模板
我是一个bootstrap新手，我有一个100％宽的模板，我想用bootstrap编码。 第一列从左上angular开始，我有一个谷歌地图延伸到最右边。 我以为我可以用container-fluid类做到这一点，但似乎不再可用。 我不知道如何用bootstrap实现这个布局3.我使用themeforest中的几何PSD模板，如果你想查看布局的话，这里的链接： http ://themeforest.net/item/geometry-design-for- 地理位置-社会- networkr / 4752268
对于Bootstrap 3，您将需要使用自定义包装并将其宽度设置为100％。
.container-full { margin: 0 auto; width: 100%; }
这里是Bootply的一个工作示例
如果你不想添加一个自定义的类，你可以通过将所有内容都包含在一个col-lg-12 （ 宽布局演示 ）中来实现非常宽的布局（不是100％），
Bootstrap 3.1更新
container-fluid类已经在Bootstrap3.1中返回，所以这可以用来创build一个全宽的布局（不需要额外的CSS）。
Bootstrap 3.1演示
这是Bootstrap v3.0.0中 100％宽度布局的完整基本结构。 你不应该用container类包装你的<div class="row"> 。 原因container类将需要大量的保证金，这将不会为您提供全屏（100％宽度）的布局，其中bootstrap从其移动版本v3.0.0中删除了容器stream体类。
所以刚开始写没有容器类的<div class="row"> ，你就可以用100％的宽度布局。
<!DOCTYPE html> <html> <head> <title>Bootstrap Basic 100% width Structure</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="http://getbootstrap.com/assets/js/html5shiv.js"></script> <script src="http://getbootstrap.com/assets/js/respond.min.js"></script> <![endif]--> <style> .red{ background-color: red; } .green{ background-color: green; } </style> </head> <body> <div class="row"> <div class="col-md-3 red">Test content</div> <div class="col-md-9 green">Another Content</div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="jquery-latest.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> </body> </html>
为了亲眼看到结果，我创build了一个bootply。 查看那里的实时输出。 http://bootply.com/82136和完整的基本bootstrap 3 100％宽度布局我创造了一个要点。 你可以使用它。 从这里获取要点
如果您需要更多帮助，请回复我。 谢谢。
使用Bootstrap 3.3.5和.container-fluid ，这是我如何得到完整的宽度，没有排水沟或水平滚动移动。 请注意， .container-fluid在3.1中被重新引入。
手机/平板电脑全宽，桌面上1/4屏幕
<div class="container-fluid"> <!-- Adds 15px left/right padding --> <div class="row"> <!-- Adds -15px left/right margins --> <div class="col-md-4 col-md-offset-4" style="padding-left: 0, padding-right: 0"> <!-- col classes adds 15px padding, so remove the same amount --> <!-- Full-width for mobile --> <!-- 1/4 screen width for desktop --> </div> </div> </div>
所有分辨率的全宽（手机，桌面，桌面）
<div class="container-fluid"> <!-- Adds 15px left/right padding --> <div class="row"> <!-- Adds -15px left/right margins --> <div> <!-- Full-width content --> </div> </div> </div>
你正确的使用div.container-fluid ，你也需要一个div.row孩子。 然后，内容必须放置在没有任何网格列。 如果你看看文档，你可以find这个文本：
- 行必须放置在.container（固定宽度）或.container-fluid（全宽度）内才能正确alignment和填充。
- 使用行来创build水平的列组。
不使用网格列就可以了，如下所述：
- 内容应放在列中，只有列可能是行的直接子节点。
看这个例子，你可以阅读这个文本：
全宽单列 ：全宽元素不需要网格类。
以下是一个使用正确布局显示一些元素的实例。 这样你就不需要任何自定义CSS或黑客。
