100% 宽度 Twitter Bootstrap 3 模板 [英] 100% width Twitter Bootstrap 3 template

问题描述

我是一个引导程序新手，我有一个 100% 宽的模板，我想用引导程序进行编码.第一列从左角开始，我有一张谷歌地图，一直延伸到最右边.我以为我可以用 container-fluid 类来做到这一点，但这似乎不再可用.我不知道如何使用 bootstrap 3 实现该布局.我使用的是 themeforest 的 Geometry PSD 模板，如果您想查看布局，请访问此处的链接:http://themeforest.net/item/geometry-design-for-geolocation-social-networkr/4752268

I am a bootstrap newbie and I have a 100% wide template that I want to code with bootstrap. The first column begins at the left corner and I have a Google map the stretches to the rightmost. I thought I could do this with container-fluid class, but that doesn't seem to be available any longer. I have no idea how to achieve that layout with bootstrap 3. I am using the Geometry PSD template from themeforest, the link here if you want to see the layout : http://themeforest.net/item/geometry-design-for-geolocation-social-networkr/4752268

推荐答案

对于 Bootstrap 3，您需要使用自定义包装器并将其宽度设置为 100%.

For Bootstrap 3, you would need to use a custom wrapper and set its width to 100%.

.container-full {
  margin: 0 auto;
  width: 100%;
}

这里是 Bootply 的一个工作示例

Here is a working example on Bootply

如果您不想添加自定义类，您可以通过将所有内容包装在 col-lg-12 (宽布局演示)

If you prefer not to add a custom class, you can acheive a very wide layout (not 100%) by wrapping everything inside a col-lg-12 (wide layout demo)

Bootstrap 3.1 更新

container-fluid 类已在 Bootstrap 3.1 中返回，因此可用于创建全宽布局(无需额外的 CSS).

The container-fluid class has returned in Bootstrap 3.1, so this can be used to create a full width layout (no additional CSS required)..

Bootstrap 3.1 演示

这篇关于100% 宽度 Twitter Bootstrap 3 模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！