如何将社交媒体按钮添加到引导导航

Question

我正在尝试将 Twitter、Google+ 和 Facebook 按钮添加到导航标题，以便它们显示在标题右上角的右侧，在导航菜单上方的一行中。

我正在使用 Bootstrap。

我尝试了以下内容：

1) 行类 2) 两行表 3) 另一个 ul

这些都不起作用。请在下面找到没有社交按钮链接的代码。

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：

.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;
}

Answer 1

如果您使用的是 Bootstrap，我建议您尽可能坚持使用 Bootstrap 类，并将网格设为您的新 BFF。了解网格的来龙去脉将为您节省数小时的自定义时间。

考虑到这一点，我认为您应该将两行导航项（社交链接，然后是导航链接）堆叠在一个右拉网格类中（我在示例中选择了 col-xs-8，有点随意）。

然后使用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>

我不得不猜测你的一些需求（按钮样式、logo-img 的高度），但这个例子应该能让你走上正轨：http://www.bootply.com/27qTRDLOKw