How to prevent Twitter Bootstrap changing margins as width of page is extended

I was practising with the Bootstrap 3 css. I planed on having a fixed footer and a fixed navigation bar on my webpage. So to do this I used margins of 5% to make the content in the middle of my page to not be covered by the footer or header. To format the text I am using the container class which comes with bootstrap. This can be seen in the picture below.

我正在练习Bootstrap 3 css。我计划在我的网页上有一个固定的页脚和一个固定的导航栏。因此,为了做到这一点,我使用5%的边距使页面中间的内容不被页脚或标题覆盖。要格式化文本,我使用自举的容器类。这可以在下面的图片中看到。

This looked as it should. However I soon discovered that when the width of the page is expanded it increases the margin size. Like in the picture shown below.

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

So is there a way to limit how much the margins can extend on the container class in bootstrap. For example something similar too

那么有没有办法限制边距可以在引导程序中的容器类上扩展多少。例如类似的东西

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

There is a copy of the files here if you believe this is a coding error that I have made.

如果您认为这是我所做的编码错误,那么这里有一份文件的副本。

2 个解决方案

#1

This isn't exactly a bootstrap issue - when you set padding and margin as a % value, like in your example, the % is calculated from the width of the containing element. If you want to set a fixed height, you can use px, or if you want it to be a consistent size relative to the height of the viewport instead, you can use vh (5vh is equal to 5/100 -- or 5% -- of the viewport height).

这不是一个引导问题 - 当您将填充和边距设置为%值时,就像在您的示例中一样,%是根据包含元素的宽度计算的。如果要设置固定高度,可以使用px,或者如果希望它相对于视口的高度一致,则可以使用vh(5vh等于5/100 - 或5% - 视口高度)。

Typically, this would be a case for px simply because on a small screen, 5vh could be very small, and usually a navbar, for instance, would stay a pretty consistent size regardless of how tall the window is.

通常,这只是px的一种情况,因为在小屏幕上,5vh可能非常小,例如,通常导航栏将保持相当一致的大小,无论窗口有多高。

So something like this is probably your most likely approach:

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

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

But if you do actually want to have it be relative to the height of the window, you can do this (You will probably need a higher number than 5, here to make similar to your screenshot.):

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

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

You should find either approach will prevent your margins from changing when the width of the page changes.

您应该发现任何一种方法都可以防止在页面宽度发生变化时边距发生变化。

2 个解决方案

#1

更多相关文章

随机推荐