2016-11-14 12 views
0

ソーシャルアイコンを右に引くと、ロゴと同じ高さに置かれるのではなく、中心のロゴが少し押し下げられます(つまり、ロゴより上に余分な空白を作成します)中央のロゴを使用するときにソーシャルアイコンを右に引く方法navbarのブートストラップ

私は左に浮かべて絶対的な位置を作るようにしましたが運がありません。

誰かが画面の右上に表示されるように手伝ってもらえますか?余分なスペースはありませんか?ここで

は、社会的アイコンとナビゲーションバーのために私のコードです:

HTML

<nav id="navbar-primary" class="navbar" role="navigation"> 
<div class="container-fluid"> 
<!-- Brand and toggle get grouped for better mobile display --> 
<div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary-collapse"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
</div> 
<div class="collapse navbar-collapse" id="navbar-primary-collapse"> 
    <ul class="nav navbar-nav"> 
    <li><a href="#">About Us</a></li> 
    <li><a href="#">Our Cars</a></li> 
    <a href="#"><img id="logo-navbar-middle" src="../assets/images/logo.png" width="250" alt="logo"></a> 
    <li><a href="#">Gallery</a></li> 
    <li><a href="#">Contact us</a></li> 
    </ul> 

<ul class="nav navbar-nav navbar-right pull-right"> 
      <li><a href="#"><i class="fa fa-camera-retro fa-lg"></i></a> </li> 
      <li><a href="#"><i class="fa fa-twitter fa-lg"></i></a></li> 
      <li><a href="#"><i class="fa fa-pinterest fa-lg"></i></a></li> 
     </ul> 



    </div><!-- /.navbar-collapse -->     
    </div><!-- /.container-fluid --> 
</nav> 

CSS

#navbar-primary .navbar-nav { 
background: #fff; 
width: 100%; 
text-align: center; 
li { 
display: inline-block; 
float: none; 
a { 
    padding-left: 30px; 
    padding-right: 30px; 
    padding-top:10px; 
} 
} 
} 


.social { 
margin: 0; 
padding: 0; 

} 

.social ul { 
margin: 0; 
padding: 5px; 
} 

.social ul li { 
margin: 5px; 
list-style: none outside none; 
display: inline-block; 
} 

感謝すべてのヘルプ、私は多くのために、この上で立ち往生されています日

ありがとう!

+0

このスクリーンショットのようにしたいですか? http://imgur.com/a/xpnHn – IamFaysal

+0

はい、ただし、ロゴとナビゲーションリンクはすべて中央に位置しています – ck777

+0

私は別のウェブサイトのスクリーンショットが好きでしたが、それは問題ありませんでしたが、リンクは中心に置かれているように見えますが、ロゴの上に置かれているように見えます。 – ck777

答えて

1

ここでは私が行ったことはありますが、それに対応する問題があるかもしれませんが、それはあなたを助けるかもしれません。

<!DOCTYPE html> 
    <html> 
     <head> 
      <title>TODO supply a title</title> 
      <meta charset="UTF-8"> 
      <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
      <link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /> 
      <link rel="stylesheet" href=" https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> 
      <style type="text/css"> 
       .navbar .navbar-nav { 
        display: inline-block; 
        float: none; 
       } 

       .navbar .navbar-collapse { 
        text-align: center; 
       } 
       .top-nav{ 
        margin-bottom: 0; 
        padding-top: 10px; 
        min-height: 20px; 
       } 
       .top-nav .navbar-nav>li>a{ 
        padding: 0 5px 0 5px; 
       } 
       .top-nav .navbar-right{ 
        margin-right: 10px; 
       } 
       .logo{ 
        margin-top: -30px; 
       } 
      </style> 
     </head> 
     <body> 
      <nav class="navbar top-nav"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="#"><i class="fa fa-camera-retro fa-lg"></i></a> </li> 
        <li><a href="#"><i class="fa fa-twitter fa-lg"></i></a></li> 
        <li><a href="#"><i class="fa fa-pinterest fa-lg"></i></a></li> 
       </ul> 
      </nav> 
      <nav id="navbar-primary" class="navbar" role="navigation"> 
       <div class="container-fluid"> 
        <div class="row"> 
         <div class="col-lg-12"> 
          <!-- Brand and toggle get grouped for better mobile display --> 
          <div class="navbar-header"> 
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary-collapse"> 
            <span class="sr-only">Toggle navigation</span> 
            <span class="icon-bar"></span> 
            <span class="icon-bar"></span> 
            <span class="icon-bar"></span> 
           </button> 
          </div> 
          <div class="collapse navbar-collapse" id="navbar-primary-collapse"> 
           <ul class="nav navbar-nav"> 
            <li><a href="#">About Us</a></li> 
            <li><a href="#">Our Cars</a></li> 
            <li><a href="#" style="padding-top: 0;"><img class="logo" src="logo.png" alt="Silver Lining Wedding and Classic Car Chauffeurs Nottingham Logo"></a></li> 
            <li><a href="#">Gallery</a></li> 
            <li><a href="#">Contact us</a></li> 
           </ul> 
          </div><!-- /.navbar-collapse -->   
         </div> 
        </div> 
       </div><!-- /.container-fluid --> 
      </nav> 
      <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
     </body> 
    </html> 
+0

ありがとう!私は応答の問題を整理することができると確信しています..これは、アイコンがあるときにロゴと右手側の間の余分なスペースを取り除くのですか?ありがとう – ck777

+0

はい。このコードをhtmlファイルに直接貼り付けるだけで、ロゴを追加して確認することができます。 – IamFaysal

+0

そして本当に助けてくれたら、答えを受け入れることを忘れないでください。 – IamFaysal

関連する問題