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/

希望这有帮助

菜单上方的bootstrap社交媒体图标

1 个答案: