Html 如何将社交媒体按钮添加到引导导航
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24875017/
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
How to add social media buttons to bootstrap nav
提问by alexyes
I am trying to add Twitter, Google+ and Facebook buttons to a navigation header so that they appear on the right of the top right corner of the header, on a line above the nav menu.
我正在尝试将 Twitter、Google+ 和 Facebook 按钮添加到导航标题中，以便它们显示在标题右上角的右侧，在导航菜单上方的一行中。
I am using Bootstrap.
我正在使用引导程序。
I tred the forllowing:
我尝试了以下内容：
1) row class 2) table with two rows 3) another ul
1) 行类 2) 有两行的表 3) 另一个 ul
Non of these worked. Please find below the code without the social button links.
这些都不起作用。请在没有社交按钮链接的代码下方找到。
HTML:
HTML：
<div class="nav">
<div class="container">
<span class="pull-left">
<a href="home.html">
<img src="images/logo150.png" width="150">
</a>
</span>
<ul class="pull-right">
<li><a class="active" href="home.html">Get Muse</a></li>
<li><a href="page1.html">Page1</a></li>
<li><a href="page2.html">Page2</a></li>
<li><a href="page3.html">Page3</a></li>
</ul>
</div>
</div>
CSS:
CSS：
.nav .pull-right {
padding-top: 40px;
}
.nav {
border-bottom: 1px solid #dbdbdb;
}
.nav a {
color: #5a5a5a;
font-size: 14px;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
回答by Shawn Taylor
If you're using Bootstrap, I would suggest sticking to Bootstrap classes as much as possible, and making the grid your new BFF. Learning the ins and out of the grid will save you hours and hours of customization.
如果您使用 Bootstrap，我建议您尽可能坚持使用 Bootstrap 类，并使网格成为您的新 BFF。学习网格的来龙去脉将为您节省数小时的定制时间。
With that in mind, I think you should stack your two rows of nav items (social links and then nav links) within a right-pulled grid class (I chose col-xs-8somewhat arbitrarily in my example).
考虑到这一点，我认为您应该将两行导航项目（社交链接，然后是导航链接）堆叠在一个右拉网格类中（我col-xs-8在我的示例中有些随意地选择）。
And then use http://fontawesome.iofor your social icons.
然后使用http://fontawesome.io作为您的社交图标。
<div class="col-xs-8 pull-right text-right">
<ul>
<li><a href="#"><i class="fa fa-stack-overflow"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
</ul>
<ul class="pad-top">
<li><a class="active" href="home.html">Get Muse</a></li>
<li><a href="page1.html">Page1</a></li>
<li><a href="page2.html">Page2</a></li>
<li><a href="page3.html">Page3</a></li>
</ul>
I had to guess at some of your needs (button style, height of your logo-img), but this example should get you on the right track: http://www.bootply.com/27qTRDLOKw
我不得不猜测你的一些需求（按钮样式、你的 logo-img 的高度），但这个例子应该让你走上正轨：http: //www.bootply.com/27qTRDLOKw
