添加填充到主体但不添加到页脚

Question

基本上我使用bootstrap 4并且我创建了一个body，这个body我希望padding左右20px所以我在css中这样做了但是，当我创建footer时，我不希望应用此padding，但是，它仅适用于footer的左侧。以下是body和footer的页脚代码和CSS代码。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

不要将填充物应用于身体，为身体内容创建包装并将其应用于身体内容。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

因为您没有提到固定left的{​​{1}}位置，所以默认情况下它会.footer ...

...请将left:auto应用于left:0

Stack Snippet

.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;
}