菜单上方的引导社交媒体图标答案

【问题标题】：bootstrap social media icons above menu菜单上方的引导社交媒体图标
【发布时间】：2018-05-04 17:46:38
【问题描述】：

我正在使用 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>

有没有人做过这样的事？？？

【问题讨论】：

我说得对吗，您唯一的问题是将联系按钮放在右边吗？你试过<button style="float:right">
嗨 Johannes - 我有，但按钮在黑线之外的一半 - 所以按钮的末端不与黑线对齐。谢谢

标签： menu

【解决方案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/

希望对你有帮助

【讨论】：