Question

这是过去几个小时我一直绞尽脑汁的事情，并希望得到一些信息来帮助我解决这个问题。在下面的一行中，我试着弄清楚如何做到以下几点。

在移动设备上，只将6个社交媒体图标放在容器的各自行上，以覆盖视口的整个宽度。

仅在移动设备上，我还希望能够将版权信息放在自己的行上，以覆盖视口的整个宽度。

<footer>
    <div class="container">
        <div class="row vcenter">
            <div class="pull-left col-lg-4 col-xs-12">
                <p>Copyright &copy;2016 by Me</p>
            </div>
            <div class="col-lg-4 col-lg-offset-4 col-xs-12">
                <div class="pull-right">
                    <a href="#"><i class="fa fa-behance-square fa-icon"></i></a>
                    <a href="#"><i class="fa fa-linkedin-square fa-icon"></i></a>
                    <a href="#"><i class="fa fa-twitter-square fa-icon"></i></a>
                    <a href="#"><i class="fa fa-skype fa-icon"></i></a>
                    <a href="#"><i class="fa fa-facebook-square fa-icon"></i></a>
                    <a href="#"><i class="fa fa-github-square fa-icon"></i></a>
                </div>
            </div>
        </div>
    </div>
</footer>

Answer 1

对各种视口大小使用CSS媒体查询以实现移动或其他视口特定样式。在下文中，我将版权的父div和社交图标赋予id。如果您将浏览器的大小调整为小于400px，则两者都应居中对齐。

@media (max-width: 400px) {
   #copyright {
      text-align: center;
   }
   #social > div{
      display: block;
      width: 100%;
      margin: 0 auto;
      text-align: center;
   }
}

注意：由于引导类，您的版权和社交媒体div已经占据了视口的整个宽度。我不是为什么你提到他们应该专门在他们自己的路线上。您还可以使用自举视口特定类来改变样式。

另一个注意事项，我建议您不再使用浮动或浮动对齐技术。使用 flexbox 之类的东西来达到同样的效果。它更可靠 Brilliant guide to Flexbox

Answer 2

在你的第一个div里面的行vcenter删除 col-lg-4 col-xs-12 并将其替换为col-xs-6

第二个div上的

删除 col-lg-4 col-lg-offset-4 col-xs-12 并替换为col-xs-6

Bootstrap页脚版权和社交媒体图标

2 个答案: