使用媒体查询的响应页脚

Question

我试图在平板电脑和移动设备视图中将页脚元素堆叠在一起。页脚分为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屏幕和（最大宽度：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-left，对于图像，您可以将文本向左对齐