загрузите иконки социальных сетей над меню

Question

Я использую Bootstrap и пытаюсь получить значки социальных сетей над меню - пока у меня есть:

Я стремлюсь к чему-то вроде этого:

Итак, изображение в конце - и пункты меню по-прежнему реагируют. Код, который у меня пока есть:

<header class="navbar navbar-inverse header-outer" role="banner">
  <div class="container">
    <img src="logo1.png " alt="Image" id="logo" class="img-responsive pull-left" />

    <div class="social_media">
        <ul class="nav navbar-nav pull-left padding-top nextline">  
                <li><img src="facebook.png" /></li>
                <li><img src="twitter.png" /></li>
                <li><img src="linkdin.png" /></li>
                <li><img src="instagram.png" /></li>
        </ul>
    </div>

    <div class="pull-left padding-top">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Sign Up</a></li>
            <li><a href="#">Sign In</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </div>
    <button  style="position:relative; left:0;">CONTACT WITH US</button>


  </div>

</header>

и CSS:

<style>

    .social_media {
        width: 100%;
    }
    .navbar{ background:#ffffff; border:none;}
    .nextline { 
        width:80%;
        border-bottom : 1px solid #000000;      
    }
    </style>    

Кто-нибудь делал что-нибудь подобное ???

Answer 1

Вы должны поместить еще один div вокруг нижней части, чтобы сгруппировать его. Только тогда вы можете быть уверены, что кнопка контакта может быть встроена в подчеркивание раздела социальных сетей, так как вы устанавливаете ширину так же, как ваш класс nextline. Таким образом, вы получите контейнер для детали под линией, которая имеет такую ​​же ширину, и вы можете выровнять кнопку по своему усмотрению. Так что ваш код должен выглядеть как

<div class="pull-left padding-top" style="width:80%">
  <div class="pull-left padding-top">
    <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Sign Up</a></li>
        <li><a href="#">Sign In</a></li>
        <li><a href="#">About</a></li>
    </ul>
  </div>
  <button class="pull-right padding-top">CONTACT WITH US</button>
</div>

Простой jsfiddle для всего кода

https://jsfiddle.net/87xz8q9x/5/

Надеюсь, это поможет