0

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

这给了我我需要的东西，直到我得到更小的尺寸。我不确定它会改变什么屏幕尺寸。它是 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 标签。我尝试将 (max-width: 980px) 更改为 5px，但结果是一样的。

4

2 回答 2

0

我自己也在为此苦苦挣扎。Bootstrap 对最小尺寸的响应奇怪地从容器流体本身中删除了填充，然后将相同数量的填充添加到其他尺寸不存在的填充。

因此，您正在覆盖容器流体填充，但是在小尺寸时，引导程序将容器流体填充设置为 0，并在主体上设置其他填充（默认情况下，与容器上的大小完全相同-fluid，虽然它在一个地方表示为 20px，在另一个地方表示为 $gutterWidth 变量。）。

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

我不确定最好的方法来处理你想做的事情，最干净，最有效，最简单的方法。我正在尝试自己弄清楚。

您可以尝试将身体上的填充设置为您想要的小尺寸，而不是引导。

@media (max-width: 767px) {

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

当然，现在填充在主体上，而不是容器流体，这可能会对您的设计产生其他奇怪的影响。我也在为此苦苦挣扎。

于 2013-04-03T17:22:16.153 回答
0

我目前正在使用 bootstrap responsive 2.3 构建一个网站，我通过简单地将其添加到我的 CSS 中删除了页面的排水沟。

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

而且我刚刚尝试了 padding-right 和 left 5px，它似乎工作正常。

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

于 2013-03-13T20:13:32.507 回答