如何在導航欄摺疊時更改圖標的位置？

我正在使用bootstrap模板。我試圖弄清楚，當導航欄被摺疊，並且你按下圖標欄按鈕時，菜單項列表下拉，在我的情況下是Work，About，Contact。但我也有社交媒體圖標，我試圖將其放在右上角而非右下角。如何在導航欄摺疊時更改圖標的位置？

我上傳的圖像，因爲它更有幫助。這是網站的佈局。 http://imgur.com/87sxit5

但是，當顯示最小，並在菜單中倒塌，它看起來像這樣http://imgur.com/5lv5Mpi

但我想要做的就是讓它看起來像這樣http://imgur.com/1Cj9lro

我試過幾個想法，我很接近，但還不夠。我不是很有經驗，所以我似乎無法弄清楚我失蹤或做錯了什麼。如果有人能夠幫助指出我要出錯的地方，那會非常感激。感謝您抽出寶貴的時間。

HTML：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Example</title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
<link href="css/yourCustom.css" rel="stylesheet"/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head> 
<body> 
<nav role="navigation" class="navbar navbar-default navbar-static-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a href="index.html" class="navbar-brand" style="color:#000000">Paulo Pinzon-Iradian</a> 
     </div> 

     <div id="navbarCollapse" class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav"> 
       <li><a href="work.html" style="color:#000000; margin-left:1.5em;">Work</a></li> 
       <li><a href="about.html" style="color:#000000; margin-left:1.5em;">About</a></li> 
       <li><a href="contact.html" style="color:#000000; margin-left:1.5em;">Contact</a></li>     
      </ul> 
      <div> 
       <i><a target="_blank" href="https://twitter.com/PauloPinzonArt" class="fa fa-twitter-square" style="color:#00c7f4; margin-left:.9em; font-size: 1.9em;"></a></i> 
       <i><a target="_blank" href="https://instagram.com/paulopinzonart/" class="fa fa-instagram" style="color:#125688; margin-left:.9em; font-size: 1.9em;"></a></i> 
       <i><a target="_blank" href="https://www.facebook.com/pages/Paulo-Pinzon-Iradian/849542288428399" class="fa fa-facebook-square" style="color:#3b5197; margin-left:.9em; font-size: 1.9em;"></a></i> 
      </div> 

     </div> 

    </div> 
</nav> 

</body> 
</html>

CSS：

.navbar-default{ 
    background: #fff; 
    margin-top:2%; 
    border:0px; 
} 

.navbar-brand 
{ 
    font-family: 'Open Sans', sans-serif; 
    font-size: 22px; 
} 

ul, li, a 
{ 
    font-family: 'Open Sans', sans-serif; 
    font-weight: 400; 
    font-size: 22px; 
    color: #000000; 
    font-weight: 100; 
    letter-spacing:-1px; 
} 

.navbar-toggle 
{ 
    border:0px; 
} 

i 
{ 
float:right; 
margin-top: 13px; 
} 

ul.navbar-nav div i{ 
    display: inline; 
    list-style-type: none; 
} 

@media only screen and (max-width: 750px) { 
    ul,li,a, role{ 
     width:50%; 
    } 
}

來源

2015-09-17 ppinzon

這可能幫助或給你一些想法：我把你的圖標放到一個navbar-right類和767px下調整自己的位置。

.navbar.navbar-default { 
 
    background: #fff; 
 
    border: 0px; 
 
} 
 
.navbar .navbar-brand { 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-size: 22px; 
 
} 
 
.navbar ul, 
 
.navbar li, 
 
.navbar a { 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-weight: 400; 
 
    font-size: 22px; 
 
    color: #000000; 
 
    font-weight: 100; 
 
    letter-spacing: -1px; 
 
} 
 
.navbar .navbar-toggle { 
 
    border: 0px; 
 
} 
 
@media (max-width: 767px) { 
 
    .navbar-nav.navbar-right { 
 
    top: -125px; 
 
    right: 25px; 
 
    float: right; 
 
    position: relative; 
 
    } 
 
    .navbar-nav.navbar-right > li { 
 
    display: table-cell; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav role="navigation" class="navbar navbar-default navbar-static-top"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 

 
     </button> <a href="index.html" class="navbar-brand" style="color:#000000">Paulo Pinzon-Iradian</a> 
 

 
    </div> 
 
    <div id="navbarCollapse" class="collapse navbar-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="work.html" style="color:#000000; margin-left:1.5em;">Work</a> 
 

 
     </li> 
 
     <li><a href="about.html" style="color:#000000; margin-left:1.5em;">About</a> 
 

 
     </li> 
 
     <li><a href="contact.html" style="color:#000000; margin-left:1.5em;">Contact</a> 
 

 
     </li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a target="_blank" href="https://twitter.com/PauloPinzonArt" style="color:#00c7f4;"><i class="fa fa-twitter-square"></i></a> 
 

 
     </li> 
 
     <li><a target="_blank" href="https://instagram.com/paulopinzonart/" style="color:#125688;"><i class="fa fa-instagram"></i></a> 
 

 
     </li> 
 
     <li><a target="_blank" href="https://www.facebook.com/pages/Paulo-Pinzon-Iradian/849542288428399" style="color:#3b5197;"><i class="fa fa-facebook-square"></i></a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 
<div class="container"> 
 
    <div class="alert alert-info">Soomething</div> 
 
</div>

來源

2015-09-17 20:06:45 vanburen

這個工作，非常感謝你 – ppinzon

如何在導航欄摺疊時更改圖標的位置？

回答

相關問題