Как вытащить социальные иконки вправо при использовании центрального логотипа navbar bootstrap

Когда я вытаскиваю свои социальные иконки вправо, они в конечном итоге слегка нажимают мой центрированный логотип, а не размещаются на той же высоте, что и логотип (т.е. не выше логотипа, создавая над ним лишнее свободное пространство)Как вытащить социальные иконки вправо при использовании центрального логотипа navbar bootstrap

Я пробовал плавать их влево, делая положение абсолютным и т. д., но не повезло.

Может кто-нибудь, пожалуйста, помогите мне с их появлением в правом верхнем углу экрана, но без дополнительного пространства над ними?

Вот мой код для навигационной панели с социальными иконками:

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

Любая помощь очень ценится, я застрял на этом в течение нескольких дней

Спасибо!

источник

2016-11-14 ck777

Вы хотите сделать что-то подобное этому снимку экрана? http://imgur.com/a/xpnHn – IamFaysal

Да, но только с логотипом и навигационными ссылками все сосредоточены – ck777

У меня было это как скриншот для другого веб-сайта, и это было хорошо, но по какой-то причине, когда я хочу логотип и ссылки сосредоточены, кажется, это правильно, но над логотипом, поэтому он создает дополнительное пространство, если вы знаете, что я имею в виду? – ck777

Вот что я сделал, но может быть какая-то отзывчивая проблема, но это может вам помочь.

<!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>

источник

2016-11-14 05:38:04 IamFaysal

Спасибо! Я уверен, что смогу разобраться с отзывчивыми проблемами. Разве это избавляет от лишнего пространства между логотипом и правой стороной, когда есть значки? Спасибо – ck777

да. Вы можете напрямую вставить этот код в html-файл и просто добавить логотип и проверить. – IamFaysal

И не забудьте нажать, чтобы принять ответ, если он действительно вам помог. – IamFaysal

Как вытащить социальные иконки вправо при использовании центрального логотипа navbar bootstrap

ответ

Смежные вопросы