Bootstrap - 页脚 <ul> 未在移动屏幕上对齐？答案

【问题标题】：Bootstrap - Footer <ul> not aligned on mobile screen?Bootstrap - 页脚 <ul> 未在移动屏幕上对齐？
【发布时间】：2017-12-04 16:24:26
【问题描述】：

我在页脚中有一个在桌面上显示良好的页脚，但在移动设备上它在屏幕右侧对齐。谁能弄清楚如何解决它？谢谢

    <footer class="footer">
    <div class="container">
      <div class="row">
          <div style="float:none;margin:0 auto;" id="toplist" class="col-md-12 col-xs-3 text-center">
             <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 id="hello" class="col-md-12 col-xs-9 text-center">
      © 2017 site.com
          </div>
      </div>
      </div>
    </div>
    </footer>

【问题讨论】：

你要重置ul标签的默认边距吗？

标签： twitter-bootstrap css twitter-bootstrap-3 bootstrap-4

【解决方案1】：

尝试关注，

桌面：

手机：

<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>

【讨论】：