如何添加社交媒体按钮到引导导航 [英] How to add social media buttons to bootstrap nav

问题描述

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

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.

我使用Bootstrap。

I am using Bootstrap.

我试图下载：

1）row class
2）两行表
3）另一个ul

1) row class 2) table with two rows 3) another ul

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

Non of these worked. Please find below the code without the social button links.

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

推荐答案

如果您使用Bootstrap ，我建议尽可能多的坚持Bootstrap类，并使网格成为你的新BFF。学习内置和外出的网格将节省你的定制的时间和小时。

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.

考虑到这一点，我想你应该堆叠两行导航项目链接，然后导航链接）在一个右拉的网格类（我选​​择 col-xs-8 有点任意在我的例子）。

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-8 somewhat arbitrarily in my example).

然后使用 http://fontawesome.io 查看您的社交图标。

And then use http://fontawesome.io for your social icons.

<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

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

这篇关于如何添加社交媒体按钮到引导导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！