Javascript 如何防止Twitter引导在页面宽度扩展时更改页边距_Javascript_Jquery_Html_Css_Twitter Bootstrap

Javascript 如何防止Twitter引导在页面宽度扩展时更改页边距

javascript jquery html css twitter-bootstrap

Javascript 如何防止Twitter引导在页面宽度扩展时更改页边距,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我在练习Bootstrap3CSS。我计划在我的网页上有一个固定的页脚和一个固定的导航栏。为了做到这一点，我使用了5%的边距以使页面中间的内容不被页脚或页眉所覆盖。为了格式化文本，我使用了bootstrap附带的容器类。这可以在下图中看到这看起来是应该的。然而，我很快发现，当页面的宽度扩大时，它会增加页边空白的大小。如下图所示那么有没有一种方法可以限制bootstrap中容器类的边距可以扩展多少呢。比如类似的东西 .addThisClassToTagWithClassContainer

我在练习Bootstrap3CSS。我计划在我的网页上有一个固定的页脚和一个固定的导航栏。为了做到这一点，我使用了5%的边距以使页面中间的内容不被页脚或页眉所覆盖。为了格式化文本，我使用了bootstrap附带的

容器

类。这可以在下图中看到

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

那么有没有一种方法可以限制bootstrap中

容器

类的边距可以扩展多少呢。比如类似的东西

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

如果您认为这是我犯的编码错误，那么这里有一个文件的副本。

容器类故意不是100%宽度。不同的固定宽度取决于视口的宽度

如果要使用全屏幕，请使用

.container fluid

：

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-6"></div>
      <div class="col-lg-6"></div>
    </div>
    <div class="row">
      <div class="col-lg-8"></div>
      <div class="col-lg-4"></div>
    </div>
    <div class="row">
      <div class="col-lg-12"></div>
    </div>
  </div>
</body>

有意将容器类设置为非100%宽度。不同的固定宽度取决于视口的宽度

如果要使用全屏幕，请使用

.container fluid

：

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-6"></div>
      <div class="col-lg-6"></div>
    </div>
    <div class="row">
      <div class="col-lg-8"></div>
      <div class="col-lg-4"></div>
    </div>
    <div class="row">
      <div class="col-lg-12"></div>
    </div>
  </div>
</body>

这并不完全是一个引导问题-当您将

padding

和

margin

设置为%值时，就像在您的示例中一样，%是从包含元素的宽度计算出来的。如果要设置固定高度，可以使用

px

，或者如果希望它相对于视口高度的大小一致，可以使用

vh

（5vh等于视口高度的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的数字，这里与你的屏幕截图相似）：

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

这并不是一个引导问题-当您将

填充

和

边距