navbarのソーシャルメディアのアイコンの間隔

Question

私は個人的なポートフォリオを構築しています。タイトル、ソーシャルメディアアイコン、ナビゲーションリンクを持つnavbarがあります。モバイルで見ると、タイトルの下にソーシャルメディアアイコンが垂直に表示されます。タイトルとアイコンバーの間に、横にタイトルの横に表示したいと思います。

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

任意の助けいただければ幸いです。また、デスクトップで表示するときにタイトルを縦に並べることをお勧めします。私はを試しましたが、うまくいきませんでした。

ありがとうございます。 -Z

Answer 1

私は周りを遊んで私がそれらを望んでいたアイコンを手に入れました。新しいコード：

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