css - 如何将 Bootstrap 的容器 div 调整为距左视口边缘 100 像素？

Question

我正在使用容器div具有的 Twitter Bootstrap 固定布局：

margin-left: auto;
margin-right: auto;

所以它总是停留在中心。

我想要做的是定位容器，使左侧浏览器窗口边框和容器之间有 100px 的间隙。当窗口变小时，我希望容器移动到窗口的边框。

我怎样才能做到这一点？

score 4 · Accepted Answer

更改容器边距的另一种方法是container-fluid在大屏幕上仅使用 12 列中的 8 列（或 10 列）...

<div class="container-fluid">
    <div class="row">
        <div class="col-md-8">
         .. page layout here
        </div>
    </div>
</div>

score 2 · Accepted Answer

覆盖 twitter 引导 css 文件.container以margin-left: 100px解决将其定位得更近的问题。

至于当窗口变小时将其移近，我不知道如何使用 css 来完成，以便最大值为 100px。但是如果没有最大值，它是可行的，margin-left: x%其中 x 是您认为合适的数字。这样，当浏览器窗口大小发生变化时，左边距也会发生变化。

希望这有帮助。

score 0 · Accepted Answer

使用流体布局并为主体添加填充。

body { padding-left: 100px; }

这样，内容将始终从左侧填充窗口最多 100 像素。

score 0 · Accepted Answer

好的，这就是我所做的：

.container {
  padding-left: 10px;
  padding-right: 250px;
}

并没有给出我想要的结果，但非常接近。我的第一个 span 3 是侧边栏，最后一个 span9 是主要内容区域。主要内容区域现在始终居中，旁边的侧边栏与窗口边框的最小间隙为 10 像素。

4 回答 4