Html 100% 宽度 Twitter Bootstrap 3 模板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18449918/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
100% width Twitter Bootstrap 3 template
提问by Samia Ruponti
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. 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
我是一个引导程序新手，我有一个 100% 宽的模板，我想用引导程序进行编码。第一列从左角开始，我有一个谷歌地图，它一直延伸到最右边。我以为我可以通过container-fluid课堂做到这一点，但这似乎不再可用。我不知道如何使用 bootstrap 3 实现该布局。我使用的是 themeforest 的 Geometry PSD 模板，如果您想查看布局，请访问此处的链接：http://themeforest.net/item/geometry-design-for- geolocation-social-networkr/4752268
回答by Zim
For Bootstrap 3, you would need to use a custom wrapper and set its width to 100%.
对于 Bootstrap 3，您需要使用自定义包装器并将其宽度设置为 100%。
.container-full {
margin: 0 auto;
width: 100%;
}
Hereis a working example on Bootply
这是 Bootply 上的一个工作示例
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)
如果您不想添加自定义类，则可以通过将所有内容包装在col-lg-12（宽布局演示）中来实现非常宽的布局（不是 100% ）
Update for Bootstrap 3.1
Bootstrap 3.1 更新
The container-fluidclass has returned in Bootstrap 3.1, so this can be used to create a full width layout (no additional CSS required)..
的container-fluid类中引导3.1已返回，所以这可以被用来创建一个完整的宽度的布局（没有额外的CSS需要）..
回答by Shaharia Azam
This is the complete basic structure for 100% width layoutin Bootstrap v3.0.0. You shouldn't wrap your <div class="row">with containerclass. Cause containerclass will take lots of margin and this will not provide you full screen (100% width) layout where bootstrap has removed container-fluidclass from their mobile-first version v3.0.0.
这是完整的基本结构100％的宽度布局中引导V3.0.0。你不应该<div class="row">用container类来包装你的。因为container类将占用大量余量，这不会为您提供全屏（100% 宽度）布局，其中引导程序已从其移动优先版本 v3.0.0 中删除了容器流体类。
So just start writing <div class="row">without container class and you are ready to go with 100% width layout.
因此，只需在<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="//code.jquery.com/jquery.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>
To see the result by yourself I have created a bootply. See the live output there. http://bootply.com/82136And the complete basic bootstrap 3 100% width layout I have created a gist. you can use that. Get the gist from here
为了自己查看结果，我创建了一个引导程序。查看那里的实时输出。http://bootply.com/82136和完整的基本引导程序 3 100% 宽度布局我已经创建了一个要点。你可以使用它。从这里获取要点
Reply me if you need more further assistance. Thanks.
如果您需要更多进一步的帮助，请回复我。谢谢。
回答by angularsen
Using Bootstrap3.3.5 and .container-fluid, this is how I get full width with no gutters or horizontal scrolling on mobile. Note that .container-fluidwas re-introduced in 3.1.
使用Bootstrap3.3.5 和.container-fluid，这就是我如何在移动设备上获得全宽而没有装订线或水平滚动。请注意，它.container-fluid在 3.1 中重新引入。
Full width on mobile/tablet, 1/4 screen on desktop
移动设备/平板电脑上的全宽，桌面上的 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>
Full width on all resolutions (mobile, table, desktop)
所有分辨率下的全宽（移动、桌面、桌面）
<div class="container-fluid"> <!-- Adds 15px left/right padding -->
<div class="row"> <!-- Adds -15px left/right margins -->
<div>
<!-- Full-width content -->
</div>
</div>
</div>
回答by gerardnll
You're right using div.container-fluidand you also need a div.rowchild. Then, the content must be placed inside without any grid columns.
If you have a look at the docs you can find this text:
你用对了div.container-fluid，你还需要一个div.row孩子。然后，内容必须放置在没有任何网格列的内部。如果您查看文档，您可以找到以下文字：
- Rows mustbe placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
- Use rows to create horizontal groups of columns.
- 行必须放置在 .container（固定宽度）或 .container-fluid（全宽）中，以便正确对齐和填充。
- 使用行创建水平的列组。
Not using grid columns it's ok as stated here:
不使用网格列就可以了，如下所述：
- Content shouldbe placed within columns, and only columns maybe immediate children of rows.
- 内容应该放在列中，并且只有列可以是行的直接子项。
And looking at thisexample, you can read this text:
看看这个例子，你可以读到这段文字：
Full width, single column: No grid classes are necessary for full-width elements.
全宽，单列：全宽元素不需要网格类。
Here'sa live example showing some elements using the correct layout. This way you don't need any custom CSS or hack.
这是一个实时示例，显示了使用正确布局的一些元素。这样您就不需要任何自定义 CSS 或 hack。
回答by Felix
In BOOTSTRAP 4 you can use
在 BOOTSTRAP 4 中，您可以使用
<div class="row m-0">
my fullwidth div
</div>
... if you just use a .row without the .m-0 as a top level div, you will have unwanted margin, which makes the page wider than the browser window and cause a horizontal scrollbar.
...如果您只使用没有 .m-0 的 .row 作为顶级 div，您将拥有不需要的边距，这会使页面比浏览器窗口更宽并导致水平滚动条。
