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。）< / p>

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

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

1 个答案: