引导页脚版权和社交媒体图标答案

【问题标题】：Bootstrap Footer Copyright and Social Media Icons引导页脚版权和社交媒体图标
【发布时间】：2016-07-26 11:29:16
【问题描述】：

这是过去几个小时我一直在绞尽脑汁想解决的问题，我希望得到一些信息来帮助我解决这个问题。通过以下行，我正在尝试弄清楚如何执行以下操作。

在移动设备上，仅将容器上的 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>

【问题讨论】：

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

【解决方案1】：

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

@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

【讨论】：

我在手机上查看时没有任何变化。

【解决方案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

【讨论】：

我在手机上查看时没有任何变化。