Html 带有徽标和社交共享按钮的顶栏区域，带有引导中的搜索栏

大家好，有人能帮我更正代码，使徽标、社交共享按钮与引导程序顶部栏中的搜索栏对齐，如下图所示吗 以及相应的带有引导功能的菜单导航栏。 我的代码附在下面，我可以得到所需的结构，但不能应用适当的css到它

<div class="top-bar">
<div class="col-sm-4">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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 class="navbar-brand">
            <a href="index.html"><img src="images/logo.png" alt="logo"></a>
        </div><!-- logo-end -->
    </div>
</div>
<!---Social Icons--> 
<div class="col-sm-8 " align="right">

    <div class="social">
        <ul class="social-share">
            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
            <li><a href="#"><i class="fa fa-linkedin"></i></a></li> 
            <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
            <li><a href="#"><i class="fa fa-instagram"></i></a></li>
        </ul>
        </div>

        <!---Search Screen-->
        <div class="search">
            <form role="form">
            <div class="searchtop">
                <input type="text" class="search-form" autocomplete="off" placeholder="Type your search here...">
                <i class="fa fa-search"></i>
            </div>
            </form>
       </div>
       </div>

切换导航

---

谢谢。

请使用以下代码：

<div class="col-sm-8 " align="right">
    <div class="social">
        <span><a href="#">facebook</a></span>
        <span><a href="#">twitter</a></span>
        <span><a href="#">linkedin</a></span> 
        <span><a href="#">pinterest</a></span>
        <span><a href="#">instagram</a></span>

    <!---Search Screen-->

       <span>
            <input type="text" class="search-form" autocomplete="off" placeholder="Type your search here...">
            <i class="fa fa-search"></i>            
   </span>
</div>

---

如示例图像所示，您希望在左侧对齐徽标，而在右侧对齐社交媒体图标、搜索和导航栏。社交媒体图标位于第一行

有几种方法可以做到这一点。我基本上采用了这种方法：

艾哈迈德的笔

你需要展示你想要的和你现在得到的。。。你试图得到想要的结果的css会建议你去代码笔复制结果。。然后用链接提问。。。类似这样的东西：Hi@Ahmad这里是codepen链接，请您查看并帮助我获取它，或者用我之前告诉的代码替换标题和搜索条形码。增加必要的课程，让它看起来不错。你想让我加一把小提琴来帮你吗？如果你有时间，请帮我拉小提琴。：-）给你。只是代码外观的要点。

<div class="row">
  <div class="col-md-3">Logo</div>
  <div class="col-md-9">
    <div class="col-md-12">Social-Icons & Search-Bar</div>
    <div class="col-md-12">Nav-Bar</div>
  </div>
</div>