使用媒体查询的响应式页脚

Question

我正在尝试在平板电脑和移动设备视图中将页脚元素堆叠在一起。我的页脚有 3 个部分（联系方式、徽标和版权信息）。我添加的媒体查询没有做任何事情。目前，这 3 个部分相互重叠，但看起来像一个楼梯，而不是直接相互重叠。

这是实时预览的样子：

有人能告诉我我错过了什么吗？我刚刚开始编码和操作我在网上找到的模板。 CSS 和 HTML 代码如下。

UPDATED live preview:

.site-footer {
  padding: 5em 0;
  background: #f2f2f2;
  font-size: 13px;
}

.site-footer p:last-child {
  margin-bottom: 0;
}

.site-footer a {
  color: #f4b214;
}

.site-footer a:hover {
  color: #f4b214;
}

.site-footer h3 {
  font-size: 15px;
  margin-bottom: 20px;
}

.site-footer .footer-link li {
  line-height: 1.5;
  margin-bottom: 15px;
}

.site-footer hr {
  width: 100%;
}

@media only screen and (min-width: 320px) {
  .site-footer .container .row .col-sm-12 {
    display: block;
    float: none;
    width: 100%;
  }
}

@media only screen and (min-width: 768px) {
  .site-footer .container .row .col-md-12 {
    display: block;
    float: none;
    width: 100%;
  }
}

<footer class="site-footer" role="contentinfo">
  <div class="container">
    <div class="row">
      <div class="col-lg-4 col-md-12 col-sm-12">
        <ul class="list-unstyled footer-link">
          <li class="d-flex"><span class="mr-3">Office:</span><span class="text-black">439 South Florida Avenue 
                  <br>Suite 202
                  <br>Lakeland, Florida 33801</span></li>
          <li class="d-flex"><span class="mr-3">Phone:</span><span class="text-black">863 683 9297</span></li>
          <li class="d-flex"><span class="mr-3">Hours:</span><span class="text-black">Monday - Friday 
                  <br>8:30 AM to 5:30 PM
                  <br>Meetings by Appointment Only</span></li>
        </ul>
      </div>

      <div class="col-lg-4 col-md-12 col-sm-12">
        <a href="index.html"><img src="img/MR_full_logo.png" style="max-width: 200px" class="center" /></a>
      </div>

      <div class="col-lg-4 col-md-12 col-sm-12">
        <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
        <p align="right" class="copyright">Copyright &copy;
          <script>
            document.write(new Date().getFullYear());
          </script> All rights reserved <br> This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a></p>
        <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
      </div>
    </div>
  </div>
</footer>

Answer 1

嘿，试试下面的代码并检查输出，它将满足您的要求。使用@media only screen and (max-width: 768px) 在移动和标签视图中获得所需的输出。最大宽度为 768 是指平板电脑视图。

.site-footer {
  padding: 5em 0;
  background: #f2f2f2;
  font-size: 13px;
}

.site-footer p:last-child {
  margin-bottom: 0;
}

.site-footer a {
  color: #f4b214;
}

.site-footer a:hover {
  color: #f4b214;
}

.site-footer h3 {
  font-size: 15px;
  margin-bottom: 20px;
}

.site-footer .footer-link li {
  line-height: 1.5;
  margin-bottom: 15px;
}

.site-footer hr {
  width: 100%;
}


@media only screen and (min-width: 320px) {
    .site-footer  .container .row .col-sm-12 { 
        display: block; 
        float: none;
        width: 100%;
    }
  }


@media only screen and (min-width: 768px) {
  .site-footer .container .row .col-md-12 { 
        display: block; 
        float: none;
        width: 100%;
    }
  }
  @media only screen and (max-width: 768px) {
    .site-footer{
      text-align: center;
    }

  .site-footer .footer-link li {
    list-style: none;
  }
  .site-footer p:last-child {
      text-align: center;
  }
}

<footer class="site-footer" role="contentinfo">
  <div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-12 col-sm-12">
        <ul class="list-unstyled footer-link">
          <li class="d-flex"><span class="mr-3">Office:</span><span class="text-black">439 South Florida Avenue 
              <br>Suite 202
              <br>Lakeland, Florida 33801</span></li>
          <li class="d-flex"><span class="mr-3">Phone:</span><span class="text-black">863 683 9297</span></li>
          <li class="d-flex"><span class="mr-3">Hours:</span><span class="text-black">Monday - Friday 
              <br>8:30 AM to 5:30 PM
              <br>Meetings by Appointment Only</span></li>
        </ul>
      </div>

      <div class="col-lg-4 col-md-12 col-sm-12">
          <a href="index.html"><img src="img/MR_full_logo.png" style="max-width: 200px" class="center" /></a> 
        </div>

      <div class="col-lg-4 col-md-12 col-sm-12">
        <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
        <p align="right" class="copyright">Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved <br> This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a></p>
        <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
      </div>
    </div>
  </div>
</footer>

Answer 2

这是因为你在最后一个 div 中的 p 标签有一个属性 align="right"，它在小屏幕上向左浮动或者使用 text-align left 并且你的图像你可以给 text align left