html - 如何制作页脚响应式 Bootstrap

Question

大家好，我有一个关于 bootstrap 的简单问题，试图让页脚响应，但出于某种原因我似乎做不到，任何帮助使这个页脚响应手机等的帮助都会很棒。

到目前为止我有:

不知道我应该做什么，新手:0

感谢帮助

Answer 1

不太确定你想要什么样的外观，但如果你正在寻找但假设你正在寻找具有左右部分的东西，然后在移动尺寸堆栈上使其更容易看到，你可以做类似的事情以下内容:

这是一个向您展示结果的 fiddle Fiddle Demo

<footer>
  <div class="container">
    <div class="row">
      <div class="col-sm-8 footer-left">
        <img class="footer-logo" src="http://placehold.it/250x250" />
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
      </div>
      <div class="col-sm-4 footer-right">
        <a class="fa fa-facebook" href="#"></a>
        <a class="fa fa-twitter" href="#"></a>
        <a class="fa fa-instagram" href="#"></a>
      </div>
    </div>
  </div>
</footer>

和响应式CSS

@media screen and (min-width:768px){
  .footer-right{text-align:right;}
}
@media screen and (max-width:767px){
  .footer-left, .footer-right{text-align:center;}
  .footer-logo{display:block;margin:5px auto;}
}