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

【问题标题】：How to adjust Bootstrap's container div to 100px off the left viewport edge?如何将 Bootstrap 的容器 div 调整为距左视口边缘 100 像素？
【发布时间】：2019-01-04 04:09:14
【问题描述】：

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

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

所以它总是停留在中心。

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

我怎样才能做到这一点？

【问题讨论】：

标签： css html twitter-bootstrap

【解决方案1】：

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

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

http://www.bootply.com/SRnhM22tPr

【讨论】：

【解决方案2】：

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

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

希望这会有所帮助。

【讨论】：

是的，我也测试过。但问题真的是我希望它在窗口大小达到容器内容的边框时立即移动到边框
你必须使用类似 jquery 的东西并修改 margin-left 的 css 值

【解决方案3】：

使用fluid layout 并向正文添加填充。

body { padding-left: 100px; }

这样，内容将始终填满窗口，距离左侧最多 100 像素。

【讨论】：

我真的不想使用流畅的布局。仅 940px 的容器具有正确的调整位置
为什么？你所要求的是流体的定义。 “当窗口变小时，我希望容器移动到窗口的边框。”
现在知道了 ;) 使用了一个简单的媒体查询
酷，请注意 IE6,7 & 8 不支持它们。但是这些用户无论如何都应该被诅咒:)

【解决方案4】：

好的，这就是我所做的：

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

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

【讨论】：