javascript - 如何防止 Twitter Bootstrap 在页面宽度扩展时更改边距

Question

我正在练习 Bootstrap 3 css。我计划在我的网页上有一个固定的页脚和一个固定的导航栏。为此，我使用 5% 的边距使页面中间的内容不被页脚或页眉覆盖。为了格式化文本，我使用了 Bootstrap 附带的 container 类。这可以在下图中看到。

这看起来应该如此。但是我很快发现，当页面宽度扩大时，它会增加边距大小。如下图所示。

那么有没有一种方法可以限制 bootstrap 中的 container 类的边距可以扩展多少。例如也有类似的东西

.addThisClassToTagWithClassContainer {
     max-margin-top:5%;
     max-margin-bottom:5%;
     max-margin-left:5%;
     max-margin-right:5%;
}

有一份文件的副本here如果您认为这是我犯的编码错误。

Answer 1

这不完全是 Bootstrap 问题 - 当您将 padding 和 margin 设置为 % 值时，就像在您的示例中一样，% 是根据宽度计算的包含元素。如果你想设置一个固定的高度，你可以使用px，或者如果你希望它相对于视口(viewport)的高度大小一致，你可以使用vh(5vh 等于视口(viewport)高度的 5/100 或 5%)。

通常，px 就是这种情况，因为在小屏幕上，5vh 可能非常小，例如，导航栏通常会保持无论窗口有多高，尺寸都非常一致。

所以像这样的事情可能是您最有可能的方法:

.page-body {
  margin-top: 100px; /* some number equal to the height of navbar */  
  margin-bottom: 150px; /* some number equal to the height of footer */  
}

但是如果你确实想让它相对于窗口的高度，你可以这样做(你可能需要一个比 5 更高的数字，这里与你的屏幕截图相似。):

.page-body {
  margin-top: 5vh;   
  margin-bottom: 5vh;
}

您应该会发现，当页面宽度发生变化时，这两种方法都可以防止边距发生变化。