Question

我在尝试将页脚设置为全宽时遇到问题。我认为它与列的东西，但我不知道如何解决这个问题。如何填充页脚的左右两端？

HTML：

<footer class="container">
  <div class="row">
    <div class="copyrightText">
      <p class="col-sm-4"><a href='../credit/index.html'>&copy; Justin Sanchez</a></p>
        <ul class="col-sm-8">
          <li class="col-sm-1">
            <a href="https://www.instagram.com/anothernameforbox/">
              <img src="img/instalogo.png" type="button"></li></a>
          <li class="col-sm-1">
            <a href="https://linkedin.com/in/justin-emmanuel-o-sanchez/">
              <img src="img/linklogo.png"></li></a>
          <li class="col-sm-1">
            <a href="https://github.com/anothernameforbox">
              <img src="img/gitlogo.png"></li></a>
          <li class="col-sm-1">
            <a href="mailto:sanchezjustin6039@gmail.com">
              <img src="img/mailicon.png"></li></a>
          </ul>
    </div>
</footer>

CSS： / 页脚 /

footer {
  display: block;
  padding: 20px 0;
  font-size: 12px;
  width: 100%;
  background-color: Azure;
  background-size: auto;
}

footer p {
  font-size: 15px;
}

footer .col-lg-12 {
  display: inline-flex;
  justify-content: flex-end;
}

footer ul {
  list-style: none;
}

footer li img {
  width: 32px;
  height: 32px;
}

Answer 1

原因是您使用.container类作为页脚。使用.container-fluid作为全宽容器，跨越视口的整个宽度。

Answer 2

1）使用课程.container-fluid代替课程.container。

或

2）更改类.container的样式：

.container { margin: 0; width: 100%; }

Demo

为什么我的页脚不会在两端延伸？

2 个答案: