Question

嗨大家有一个关于bootstrap的简单问题，试图让页脚重新占据，但由于某些原因我似乎无法做到这一点，任何帮助使这个页脚用于移动设备等等都会很棒。

到目前为止，我有：

不确定我应该做什么，对此不熟悉：0

感谢您的帮助

Answer 1

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

这是一个向您展示结果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;}
}

Answer 2

为您举例说明如何构建HTML：

footer{
  background-color:yellow;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <footer class="col-sm-12">
      <div class="row">
        <p class="col-sm-6 pull-left">Left content</p>
        <p class="col-sm-6 pull-right">Right content</p>
      </div>
  </footer>
</div>

了解Bootstrap网格系统：http://getbootstrap.com/css/#grid

简单的引导程序布局

Answer 3

这是你缺少的元素的工作方式：https://jsfiddle.net/odx59t0p/

            <div class="logo1">
                <img src="Image/Logo.png" class="img-responsive"/>
                <div class="col-sm-3">
                  <p><a href="#" onClick="swap('refabout')">Reference/About</a>          
                </div>
            </div>

请注意：唯一添加的内容是：

指向所需CSS / JS文件的链接（您应该在头标记中已有）
“row”类为“navbar-text”
“col-sm- *”类来分隔菜单项。

如何制作页脚resposive bootstrap

3 个答案: