html - Bootstrap 页脚列/行问题

Question

我在 Bootstrap 网站上有一个页脚，它的行中的列中有 4 个元素 - 这个显示在桌面屏幕上是正确的。

对于移动屏幕，我希望将其更改为显示 2 个元素，其他 2 个元素在此下方 - 并且 1 个元素的格式完全是乱七八糟的。

这是桌面上页脚的图像。

这是小屏幕(即移动设备)的页脚图片

在小屏幕图像中，“已认证”图像应该与“We're Social”文本行稍微对齐，而不是在其下方。我尝试更改列大小(即:使“Accredited”= col-xs-7 & col-sm-7 和“We're Social”= col-xs-5 & col-sm-5)，但它没有区别。

关于问题所在的任何建议？

这是我的页脚的 HTML 代码:

<!-- ========= START FOOTER ========== -->
<footer class="footer">
  <div class="container">
    <div class="row">
      <div class="col-xs-6 col-sm-6 col-lg-3">
        <a href="http://www.acnc.gov.au/" target="_blank">
        <img class="img-responsive center-block" src="images/ACNC-Charity-Logo.png" alt="ACNC Charity" width="150" height="150"></a>
      </div>

      <div class="col-xs-6 col-sm-6 col-lg-3 text-center">
        <h4><strong>Contact Us</strong></h4>
        <ul class='list-unstyled'>
          <li><i class='glyphicon glyphicon-globe'></i> 67-71 Strathallan Rd, Macleod, Victoria</li>
          <li><i class='glyphicon glyphicon-phone'></i> (03) 9450 7600</li>
          <li><i class='glyphicon glyphicon-envelope'></i> <a href='mailto:office@openhousecic.org.au'>office@openhousecic.org.au</a></li>
        </ul>
      </div>

      <div class="col-xs-6 col-sm-6 col-lg-3 text-center">
        <h4><strong>We're Social</strong></h4>
        <ul class='list-unstyled'>
          <li><a href="https://www.facebook.com/openhousecic/" target="_blank">Facebook</a></li>
          <li><a href="https://www.youtube.com/channel/UClFV3cZ3_e4u3O0zEmYun3w" target="_blank">YouTube</a></li>
          <li><a href="https://www.linkedin.com/company/open-house-cic" target="_blank">LinkedIn</a></li>
          <li><a href="https://www.flickr.com/photos/146218711@N02" target="_blank">Flickr</a></li>
        </ul>
      </div>

      <div class="col-xs-6 col-sm-6 col-lg-3">
        <!--<div class="blank-gap-20"></div>-->
        <a href="http://www.qip.com.au/" target="_blank">
        <img class="img-responsive center-block" src="images/QIP-logo.png" alt="QIP logo" width="150" height="83"></a>
      </div>
    </div> <!-- End Row -->

    <div class="row">
      <div class="col-sm-12 col-md-12 text-center">
        <span>Open House Christian Involvement Centres &copy; 2017 : Website by <a href="http://www.bliss.net.au" target="_blank">Bliss</a></span>
        <div class="blank-gap-10"></div>
        <p><i>We acknowledge and pay respect to the Traditional Owners of the lands upon which Open House Christian Involvement Centres are situated.</i><p>
      </div>
    </div> <!-- End row -->
  </div>  <!--- End Container -->
</footer>

我的网站正在使用 Bootstrap 的“Sticky-Footer”CSS；

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 330px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding-top: 10px;
  /* Set the fixed height of the footer here */
  height: auto;
  min-height:200px;
  background-color: #f1eeee;
  color: #333
  /*color: #f9f9f9;*/
}

Answer 1

您需要使用 responsive reset因为列的高度不同，因为内容是每一列。这是一个similar question .

<div class="row">
      <div class="col-xs-6 col-sm-6 col-lg-3">
        ..
      </div>
      <div class="col-xs-6 col-sm-6 col-lg-3 text-center">
         ..
      </div>
      <div class="visible-sm visible-xs clearfix"></div>
      <div class="col-xs-6 col-sm-6 col-lg-3 text-center">
       ..
      </div>
      <div class="col-xs-6 col-sm-6 col-lg-3">
        ..
      </div>
</div>

http://www.codeply.com/go/m5nWYTYa4H