twitter-bootstrap Bootstrap 页脚版权和社交媒体图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38580340/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Footer Copyright and Social Media Icons
提问by user3732216
This is something I've been racking my brain for the past couple of hours and would like some information to help me solve this. With the following row I'm tryin gto figure out how I can do the following.
这是我在过去几个小时里一直在绞尽脑汁的事情，并希望获得一些信息来帮助我解决这个问题。在接下来的行中，我正在尝试弄清楚如何执行以下操作。
On a mobile device only put the 6 social media icons across the container on its own line to cover the the entire width of the viewport.
在移动设备上，仅将 6 个社交媒体图标跨容器放在单独的一行中，以覆盖视口的整个宽度。
On a mobile device only I would also like to be able to put the copyright information onto its own line to cover the entire width of the viewport.
仅在移动设备上，我还希望能够将版权信息放在自己的行上以覆盖视口的整个宽度。
<footer>
<div class="container">
<div class="row vcenter">
<div class="pull-left col-lg-4 col-xs-12">
<p>Copyright ©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>
回答by ykadaru
Use CSS media queries for various viewport sizes to achieve mobile or other viewport specific styling.In the following I gave the parent div's of the copyright and the social icons an id. If you resize the browser to less than 400px, both should center-align.
对各种视口大小使用 CSS 媒体查询来实现移动或其他视口特定样式。在下面，我给了版权的父 div 和社交图标一个 id。如果您将浏览器的大小调整为小于 400 像素，则两者都应居中对齐。
@media (max-width: 400px) {
#copyright {
text-align: center;
}
#social > div{
display: block;
width: 100%;
margin: 0 auto;
text-align: center;
}
}
Note:Your copyright and social media divs already take up the entire width of the viewport thanks to the bootstrap classes. I don't why you mentioned that they should specifically be on their own line. You can also use the bootstrap viewport specific classes themselves to alter styling.
注意：由于引导类，您的版权和社交媒体 div 已经占据了视口的整个宽度。我不明白你为什么提到他们应该专门在他们自己的线上。您还可以使用引导程序视口特定的类本身来改变样式。
Another note, I suggest you don't use floats or floating alignment techniques anymore. Use something like flexboxto achieve the same effect. It's more reliable.
Brilliant guide to Flexbox
另请注意，我建议您不要再使用浮动或浮动对齐技术。使用flexbox 之类的东西来达到同样的效果。它更可靠。
Flexbox 的精彩指南
回答by Laravel14
On your first div inside row vcenter remove
col-lg-4 col-xs-12and replace it with col-xs-6
在行 vcenter 内的第一个 div 中删除
col-lg-4 col-xs-12并将其替换为col-xs-6
on the second div remove
col-lg-4 col-lg-offset-4 col-xs-12and replace with col-xs-6
在第二个 div 上删除
col-lg-4 col-lg-offset-4 col-xs-12并替换为col-xs-6
