向正文添加填充但不向页脚添加填充

Question

基本上我用的是bootstrap4，我自己创建了一个body，这个body我想用padding左右20px所以我在 css 文件中执行此操作，但是，当我创建 footer 时，我不想应用此 padding，但是，它仅适用于 [=] 的左侧16=]。这是 body 和 footer.

的页脚代码和 css 代码

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px;
  /* Vertically center the text there */
  background-color: #343a40;
  color: white;
}

body {
  padding-top: 70px;
  padding-left: 20px;
  padding-right: 20px;
}

<footer class="footer">
  <div class="container">
    <span class="text-muted">Place sticky footer content here.</span>
  </div>
</footer>

Answer 1

不要将填充应用到正文，为正文内容创建一个包装器并将其应用到它。

.body-content {
  padding-top: 70px;
  padding-left: 20px;
  padding-right: 20px;
}

.footer {
  position:fixed;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px; /* Vertically center the text there */
  background-color: #343a40;
  color: white;
}

<div class="body-content">
  Body content goes here
</div>
<footer class="footer">
<div class="container">
    <span class="text-muted">Place sticky footer content here.</span>
  </div>
</footer>

Answer 2

因为你没有提到固定.footer的left位置，所以默认是left:auto...

...因此将 left:0 应用到您的 .footer

堆栈片段

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #343a40;
  color: white;
  left: 0;
}

body {
  padding-top: 70px;
  padding-left: 20px;
  padding-right: 20px;
}

<footer class="footer">
  <div class="container">
    <span class="text-muted">Place sticky footer content here.</span>
  </div>
</footer>

向正文添加填充但不向页脚添加填充

Add padding to body but not to footer

html

css

twitter-bootstrap-4