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

问题描述

对不起，如果这是一个重复的问题，但我似乎找不到任何明确的迹象。我是一个引导新手，我有一个100％宽的模板，我想用bootstrap代码。第一列开始于左角，我有一个谷歌地图伸展到最右边。我想我可以用 container-fluid 类，但是似乎不再可用。我不知道如何实现这种布局与引导3.任何帮助是非常感激。我使用的几何PSD模板从themeforest，如果你想看到布局，这里的链接： http://themeforest.net/item/geometry-design-for-geolocation-social-networkr/4752268

Sorry if this is a repetitive question, but I can't seem to find any clear indication anywhere. 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-fluidclass, but that doesn't seem to be available any longer. I have no idea how to achieve that layout with bootstrap 3. Any help is much appreciated. 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 it's width to 100%..

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

Bootply上的工作示例：http://www.bootply.com/72278

Working example on Bootply: http://www.bootply.com/72278

如果您不想添加自定义类，则可以通过将所有内容包含在 col-lg-12 （宽布局演示： http://www.bootply.com/94398 ）

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: http://www.bootply.com/94398)

更新Bootstrap 3.1

在Bootstrap 3.1中返回了 container-fluid 类，因此可以用来创建一个全宽布局CSS required）..

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演示： http://bootply.com/116382

Bootstrap 3.1 demo: http://bootply.com/116382

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