Bootstrap - 页脚<ul>未在移动设备屏幕上对齐?

时间:2017-06-30 16:24:50

标签: css twitter-bootstrap css3 twitter-bootstrap-3 bootstrap-4

我的页脚在桌面上显示正常,但在移动设备上它在屏幕右侧对齐。任何人都可以弄清楚如何解决它?感谢

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dvContent"></div>

1 个答案:

答案 0 :(得分:0)

尝试以下,

桌面:

enter image description here

移动:

enter image description here

<footer class="footer">
  <div class="container">
    <div class="row">
      <!--removed classes-->
      <div style="float:none;margin:0 auto;" id="toplist">
        <ul>
          <a style="color:white;" href="https://example.com/">
            <li id="first" style="list-style:none;display: inline;">HOME</li>
          </a>
          <a style="color:white;" href="https://example.com/service">
            <li style="list-style:none;display: inline;padding-left:30px;">SERVICE</li>
          </a>
          <a style="color:white;" href="https://example.com/examples">
            <li style="list-style:none;display: inline;padding-left:30px;">EXAMPLES</li>
          </a>
          <a style="color:white;" href="https://example.com/order">
            <li style="list-style:none;display: inline;padding-left:30px;">ORDER</li>
          </a>
          <a style="color:white;" href="https://example.com/contact">
            <li style="list-style:none;display: inline;padding-left:30px;">CONTACT</li>
          </a>
        </ul>
      </div>
    </div>
    <!--added new <div>-->
    <div class="row">
      <div id="hello" class="col-md-12 col-xs-9 text-center">
        © 2017 site.com
      </div>
      <!--added </div>-->
    </div>
  </div>
  <!--</div>-->
</footer>