如何在CSS中处理响应式页脚

Question

以下是页脚的代码

var windows1251 = Encoding.GetEncoding("windows-1251");
var utf8 = Encoding.UTF8;

var originalBytes = windows1251.GetBytes(document.ToString());
var correctXmlString = utf8.GetString(originalBytes);
var correctDocument = XDocument.Parse(correctXmlString);

请查看响应行为

一开始，它运作正常

当它是~690px。它变成了两条线，并且我们的联系线已经对齐了。这是第一个问题，当它是.col-sm-（＆lt; 750px）时它怎么能左对齐？

当它缩小到最小尺寸时，所有文字都粘在一起。这是第二问题，当它是.col-xs（最小分辨率）时，如何逐行显示项目？

例如

<div class="col-lg-12">
  <span class="copyright link">Copyright © 2006-2015 Pure International</span>
  <ul id="footer_nav" class="list-inline">
    <li><a class="link" href="<?= site_url("page/view/privacy"); ?>"><?= lang("privacy"); ?></a></li>|
    <li><a class="link" href="<?= site_url("page/view/terms"); ?>"><?= lang("t&c"); ?></a></li>|
    <li><a class="link" href="<?= site_url("page/view/about_us"); ?>"><?= lang("about_us"); ?></a></li>|
    <li><a class="link" href="<?= site_url("page/view/contact_us"); ?>"><?= lang("contact_us"); ?></a></li>
  </ul>
</div>

可以通过bootstrap标签修复，但也欢迎使用CSS。

感谢您的帮助

更新

现在我使用了CSS方法，唯一的问题仍然是第二个问题，即如何逐行显示项目？感谢

Privacy Policy
Terms and Conditions
About Us
Contact Us