Html 如何将 Bootstrap 的容器 div 调整为距左视口边缘 100 像素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11102446/
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
How to adjust Bootstrap's container div to 100px off the left viewport edge?
提问by Mexxer
I'm using the Twitter Bootstrap fixed layout where the container divhas:
我正在使用 Twitter Bootstrap 固定布局，其中容器div具有：
margin-left: auto;
margin-right: auto;
So it always stays in the center.
所以它总是停留在中心。
What I want to do is position the container so that there is a 100px gap between the left browser window border and the container. When the window gets smaller I want the container move to border of the window.
我想要做的是定位容器，使左侧浏览器窗口边框和容器之间有 100 像素的间隙。当窗口变小时，我希望容器移动到窗口的边界。
How can I achieve this?
我怎样才能做到这一点？
采纳答案by Mexxer
Ok here's what I did:
好的，这就是我所做的：
.container {
padding-left: 10px;
padding-right: 250px;
}
doesn't give me exactly the result I was looking for, but pretty close. My first span 3 is a sidebar and the last span9 main content area. The main content area is now always centered and the sidebar next to it and has a minimum gap of 10px to the window border.
没有给我我正在寻找的结果，但非常接近。我的第一个 span 3 是侧边栏，最后一个 span9 是主要内容区域。主要内容区域现在始终居中，侧边栏位于其旁边，与窗口边框的最小间隙为 10 像素。
回答by Zim
An alternative to changing the margins of the container is to use container-fluidan only use 8 (or 10) of the 12 columns on larger screens...
更改容器边距的另一种方法是container-fluid在较大的屏幕上仅使用 12 列中的 8 列（或 10 列）...
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
.. page layout here
</div>
</div>
</div>
回答by jakee
Overwriting the twitter bootstrap css file's .containerto have margin-left: 100pxsolves the problem of positioning it closer.
覆盖 twitter bootstrap css 文件.container以margin-left: 100px解决将其定位得更近的问题。
As for moving it closer when the window gets smaller, I have no idea how it could be done with css so that the maximum is 100px. But without the maximum it is doable with margin-left: x%where x is the number you see fit. That way when the browser window size changes, so does the left margin.
至于当窗口变小时将它移近一点，我不知道如何用 css 来完成它，以便最大值为 100px。但是没有最大值，它是可行的，margin-left: x%其中 x 是您认为合适的数字。这样，当浏览器窗口大小发生变化时，左边距也会发生变化。
Hope this helped.
希望这有帮助。
回答by Terry
Use the fluid layoutand add padding to the body.
使用流体布局并向正文添加填充。
body { padding-left: 100px; }
That way the content will always fill the window up to 100px from the left hand side.
这样，内容将始终从左侧填充最多 100 像素的窗口。
