導航欄水平間距中的社交媒體圖標

我正在構建個人投資組合，我有一個帶有標題，社交媒體圖標和導航鏈接的導航欄。在移動設備上觀看時，社交媒體圖標會在標題下垂直顯示。我希望它們在標題旁邊水平顯示，所以在標題和圖標欄之間。導航欄水平間距中的社交媒體圖標

HTML：

<nav class="navbar"> 
     <div class="container-fluid"> 
      <!-- Navigation Bar --> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 

      <div class="navbar-header"> 
       <a class="navbar-brand text-center" href="index.html">Title Website</a> 
       </div> 

       <!-- Small social media icons --> 
       <ul class="nav navbar navbar-nav navbar-left pull-left"> 
         <li><a href="https://twitter.com/" target="_blank" class="fa fa-twitter fa-lg"></a></li> 
         <li><a href="https://github.com/" target="_blank" class="fa fa-github fa-lg"></a></li> 
         <li><a href="http://www.linkedin.com/in/" target="_blank" class="fa fa-linkedin fa-lg"></a></li> 
       </ul> 


        <div class="collapse navbar-collapse navbar-right" id="navbar-collapse-1"> 
         <ul class="nav navbar-nav text-center"> 
          <li><a href="index.html"><b>Home</b></a></li> 
          <li><a href="projects.html"><b>Projects</b></a></li> 
          <li><a href="media/resume.pdf" target="_blank"><b>CV/Resume</b></a></li> 
         </ul> 
         </div> 

       </div> 
    </nav>

CSS：

/* Navigation */ 
.navbar-header { 
    vertical-align: baseline !important; 
} 

.navbar-brand { 
    text-align: center; 
    font-size: 30px; 
    vertical-align: baseline !important; 
} 

.icon-bar { 
    background-color: black; 
} 

nav ul { 
    display: inline; 
} 

nav li { 
    display: inline; 
    padding: 10px; 
}

任何幫助，將不勝感激。另外，我希望在桌面上查看標題時垂直對齊。我試過navbar-brand {vertical-align: middle !important}，但沒有奏效。

謝謝。 -Z

來源

2017-06-20 Zailyn Tamayo

我試圖浮動：左重要顯示：內聯和inline-block的既不工作。 –

你可以添加小提琴嗎？ – vijayscode

https://jsfiddle.net/vfu9us4g/#&togetherjs=iOgCGDv38p –

通過玩弄我想要的圖標。新代碼：

HTML：

 <!-- Small social media icons --> 
     <ul class="nav navbar navbar-nav navbar-left pull-left"> 
      <li id="socmed"><a href="https://twitter.com/" target="_blank" class="fa fa-twitter fa-lg"></a></li> 
      <li id="socmed"><a href="https://github.com/" target="_blank" class="fa fa-github fa-lg"></a></li> 
      <li id="socmed"><a href="http://www.linkedin.com/in/" target="_blank" class="fa fa-linkedin fa-lg"></a></li> 
     </ul>

CSS：

#socmed { 
display: inline-block !important; 
float: left !important; 
}

來源

2017-07-27 04:34:52

導航欄水平間距中的社交媒體圖標

回答

相關問題