导航栏水平间距中的社交媒体图标

我正在构建个人投资组合，我有一个带有标题，社交媒体图标和导航链接的导航栏。在移动设备上观看时，社交媒体图标会在标题下垂直显示。我希望它们在标题旁边水平显示，所以在标题和图标栏之间。导航栏水平间距中的社交媒体图标

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

导航栏水平间距中的社交媒体图标

回答

相关问题