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

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