2014-07-21 55 views
2

我正在嘗試將Twitter,Google +和Facebook按鈕添加到導航標題,以便它們出現在標題右上角的右側,位於導航菜單上方的一行上。如何將社交媒體按鈕添加到引導程序導航

我正在使用Bootstrap。

我TRED的forllowing:

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

你的意思是說你想添加社交媒體按鈕?圖標?鏈接? – Dan

+0

我的意思是Twitter Follow按鈕,Facebook Like Button和Google+ +1按鈕。謝謝! – alexyes

+0

https://about.twitter.com/resources/buttons https://developers.facebook.com/docs/plugins/like-button https://developers.google.com/+/web/+1button/ – alexyes

回答

5

如果你使用引導,我會建議堅持自舉類儘可能,並提高電網新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> 

我在你的一些需求(按鈕樣式,您的標誌-IMG的高度)猜測,但是這個例子應該讓你在正確的軌道上:http://www.bootply.com/27qTRDLOKw

+0

謝謝!順便說一句,第二個鏈接似乎不起作用(http://www.bootply.com/27qTRDLOKw) – alexyes

+0

你打賭!該鏈接適用於我。 bootply有相當多的停機時間,所以一定是那個... –