html - 带有 Logo 的顶部栏区域和带有搜索栏的社交共享按钮在 Bootstrap 中

Question

嗨，谁能帮我更正代码，使 Logo 、社交分享按钮与搜索栏在 Bootstrap 顶部栏中的同一行中对齐，如下图所示 Sample image 以及相应的带有bootstrap的菜单导航栏。 我的代码附在下面，我能够获得所需的结构，但无法对其应用适当的 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>

谢谢。

Answer 1

请使用以下代码:

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