Question

我正在修改此布局http://twitter.github.com/bootstrap/examples/fluid.html，并且在调整大小期间似乎无法将容器间隙/填充到左侧，右侧和顶部以保持5px。在任何屏幕尺寸下，当前填充看起来都是20px左右。

这给了我所需要的东西，直到我达到更小的尺寸。我不确定它改变的屏幕尺寸。这是Chrome的第二次转型。在我达到那么小的尺寸后，它会恢复到上面例子中的较大差距。

body {
  padding-top: 45px;
  padding-bottom: 40px;
}
.cont-pad {
  padding-left:5px;
  padding-right:5px;
}
.container {
  padding-left:5px;
  padding-right:5px;
}
.container-fluid {
   padding-left:5px;
   padding-right:5px;
}

我使用这个作为我从示例中获取的html布局。颜色是在视觉上看到容器在调整大小时是如何填充的。我所做的修改中注意到的一件事是，最外面的容器的宽度似乎从浏览器的侧面填充，而不是一旦调整大小后div的填充。更改body标签上的左右填充也会更改导航栏的填充。我不想要的。

<div class="container-fluid cont-pad" style="background-color:Blue;">
  <div class="row-fluid">
    <div class="span12" style="background-color:Red;">this content should be 5px from left, top, and right</div>
  </div>
</div>

我假设我需要以某种方式修改@media标记。我尝试将（最大宽度：980px）更改为5px，但结果是一样的。

Answer 1

我目前正在使用bootstrap响应式2.3构建一个网站，我只是将其添加到我的CSS中，从而删除了页面的阴沟。

.container-fluid {
padding-right: 0;
padding-left: 0;
}

我刚尝试填充 - 右和左5px，它似乎工作正常。

您确定没有其他CSS影响您的容器吗？

Answer 2

我自己正在努力解决这个问题。 Bootstrap响应最小的奇怪removes the padding from container-fluid itself，然后ADDS padding--of the same amount--to ，其他大小不存在。

所以你要覆盖容器流体填充，但是在小尺寸时，bootstrap将容器流体填充设置为0，并在主体上设置其他填充（默认情况下，设置为与以前完全相同的大小）在容器流体上，虽然它表示为在一个地方固定的20px，而在另一个地方表示为$ gutterWidth变量。）。

我不知道为什么bootstrap这样做。这很疯狂。然后Bootstrap本身就需要它自己的其他解决方法来解决它自己的疯狂问题 - 例如，导航栏上的媒体查询补偿并保持导航栏即使在小尺寸下仍然是全宽的。

我不确定以最好的方式处理它你想做什么，最干净，最有效，最简单的方法。我正在试图弄清楚自己。

您可以尝试将小尺寸的衬垫设置为您想要的尺寸，而不是引导。

@media (max-width: 767px) {

// Padding to set content in a bit
body {
  padding-left: 5px;
  padding-right: 5px;
}

当然，现在衬垫在身体上，而不是容器流体，这可能会对您的设计做出其他奇怪的事情。我还在努力解决这个问题。

如何在使用bootstrap响应调整大小期间将容器或主体填充保持在5px？

2 个答案: