Html Bootstrap 100% 宽度/全宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15204976/
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
Bootstrap 100% width / Full width
提问by Somk
I want to create a new website with Bootstrap and I need it to be 100% in width, but I do not want it to be fluid. At least not for now.
我想用 Bootstrap 创建一个新网站，我需要它的宽度为 100%，但我不希望它变得流畅。至少现在不是。
The issue I have is: using bootstrap standard limits you to 960px and with a fluid layout it is full width but behaves like a fluid layout should by moving elements to become stacked when the window is shrunk in size.
我遇到的问题是：使用引导程序标准将您限制为 960 像素，并且使用流体布局时，它是全宽的，但其行为类似于流体布局应该通过在窗口缩小时移动元素来堆叠。
Is there a way to have 100% width with a static bootstrap layout?
有没有办法让静态引导程序布局具有 100% 的宽度？
采纳答案by James Donnelly
100% width ... static
100% 宽度 ... 静态
This is a bit of an oxymoron. A 100% width layout isn't static.
这有点矛盾。100% 宽度布局不是静态的。
Bootstrap uses a .containerclass to set a predefined width. Increase this to your desired page width if you want it to be greater than it's default. Be careful though that the sizing of Bootstrap's span*and offset*classes will need their widths adjusted accordingly.
Bootstrap 使用一个.container类来设置预定义的宽度。如果您希望它大于默认值，请将其增加到所需的页面宽度。请注意 Bootstrapspan*和offset*类的大小需要相应地调整它们的宽度。
回答by JP Lew
This is easy to achieve in Bootstrap 3, just replace the .containerdiv with your own:
这在 Bootstrap 3 中很容易实现，只需将.containerdiv替换为您自己的：
.my-fluid-container {
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
Thanks to Erik Flowers for the heads-up: http://www.helloerik.com/bootstrap-3-grid-introduction#fluid
感谢 Erik Flowers 的提醒：http: //www.helloerik.com/bootstrap-3-grid-introduction#fluid
UPDATE
更新
Bootstrap 3 now offers a built-in fluid container class, just use <div class="container-fluid">. See docs.
Bootstrap 3 现在提供了一个内置的流体容器类，只需使用<div class="container-fluid">. 请参阅文档。
回答by helloerik
I can't quite figure out how to reply to the main question, but here's what you want OP
我不太清楚如何回答主要问题，但这是你想要的 OP
As said above, don't use .container, use your own class like:
如上所述，不要使用 .container，使用您自己的类，例如：
.my-fluid-container {
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
Then when you build your grid, just use col-xs-* for the columns. You will now have a 100% width site that doesn't stack in the "mobile" view. Welcome to the 90's ;)
然后当你构建你的网格时，只需对列使用 col-xs-* 。您现在将拥有一个 100% 宽度的网站，该网站不会在“移动”视图中堆叠。欢迎来到 90 年代；)
回答by lngs
Just don't include the bootstrap-responsive.cssin order to disable the responsive function.
只是不要包含bootstrap-responsive.css为了禁用响应功能。
If you don't want a .containergutter/margin you can put your content outside the container but keep in mind you must maintain your content layout by yourself(still can use grid but lost an ability to centering your content) and don't forget most of the Bootstrap component like .navbarneed .containerto control its width.
如果您不想要.container装订线/边距，您可以将您的内容放在容器外，但请记住，您必须自己维护您的内容布局（仍然可以使用网格，但失去了将内容居中的能力）并且不要忘记大多数Bootstrap 组件之类的.navbar需要.container控制其宽度。
One of my work need a full screen carousel to holding all contents so I wrap my content with .containerto center the content.
我的一项工作需要一个全屏轮播来保存所有内容，因此我将内容包裹起来.container以将内容居中。
回答by George Katsanos
I guess what you mean is you don't want margin/padding on the sides. (that's the only way your message makes sense - a 100% width will take the full size of the screen so it will never be static - the size will change depending on how big the window is)
我猜你的意思是你不想要边距/边距。（这是您的消息有意义的唯一方式 - 100% 的宽度将占据屏幕的完整尺寸，因此它永远不会是静态的 - 尺寸将根据窗口的大小而变化）
We don't have a use-case or JSFiddle from you so I can't give you exact code but you need to make sure your body has margin:0 and padding:0 and then look for the other divs with Firebug or Chrome Web Dev tools.
我们没有你的用例或 JSFiddle，所以我不能给你确切的代码，但你需要确保你的身体有 margin:0 和 padding:0 然后用 Firebug 或 Chrome Web 查找其他 div开发工具。
If you want your layout to be fluid but stop at a certain point growing, then you need to apply max-width:1000px (for example) to your body or your general container/wrapper element.
如果您希望您的布局流畅但在某个点停止增长，那么您需要将 max-width:1000px （例如）应用于您的身体或您的常规容器/包装器元素。
