html - 在 bootstrap 上居中页脚文本

Question

大家好，我在调整屏幕大小时/在移动设备上遇到页脚问题。我的页脚文本放在左边，我的 ul 被诽谤了。我在下面附上了我的代码，我希望在桌面上保持相同的布局，但是当屏幕缩小时，页脚文本与布局居中对齐，但也保持相同的文本样式，因此 uls 和 li 与 text-align:left 对齐;

https://s32.postimg.org/glxnik7gl/footer.png

HTML:

<footer>
  <div class="container" id="contact">

    <div class="row">
      <div class="col-sm-3">
        <a class="navbar-brand" href="#"><span class="logo-text-footer">Company Logo</span></a>
      </div>

      <div class="col-sm-3">
        <ul>Quick Links</ul>
        <li>Home</li>
        <li>About</li>
        <li>Services</li>
        <li>Contact</li>
      </div>

      <div class="col-sm-3">
        <ul>Address</ul>
        <li>1234 Example Street </li>
        <li>City</li>
        <li>State</li>
        <li>55555</li>
      </div>

      <div class="col-sm-3">
        <li>Call: 555-555-5555</li>
        <li>E-Mail: example@gmail.com</li>
        <div class="social-icons">
          <li>Facebook</li>
          <li>YouTube</li>
          <li>Instagram</li>
          <li>Twitter</li>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="privacy">
        <p>
          <?php echo date("Y"); ?> Company Name | All Rights Reserved</p>
      </div>
    </div>


  </div>
</footer>

CSS:

/* Footer */
footer {
  height: auto;
  background: #3a526a;
}

footer #contact {
  height: auto;
  min-height: 13em;
}

footer .contact-text {
  position: relative;
  top: 20em;
}

span.logo-text-footer {
  color: #fff;
  font-size: 30px;
  vertical-align: top;
  position: absolute;
  bottom: 15px;
}

footer #contact ul {
  font-size: 17px;
  color: #fff;
  text-transform: uppercase;
  font-family: 'Myriad Pro';
  padding: 0;
}

footer #contact li {
  color: #fff;
  list-style: none;
  font-family: 'Myriad Pro';
  padding-top: 5px;
}

footer .social-icons li {
  display: inline-block;
}

footer .privacy {
  height: 50px;
  background: #455e76;
}

footer .privacy p {
  color: #fff;
  text-align: center;
  display: block;
  margin: auto;
  line-height: 50px
}

Answer 1

在页脚中添加 text-center 类。在每个 div 中将 col-sm-3 类更改为 col-md-3 col-sm-12。由于这是针对移动 View 的，因此添加以下 CSS:

@media (max-width: 768px) {
  footer {
    text-align: center;
  }
  .navbar-brand {float:none;}
}

检查 jsFiddle在这里。