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或黑客。