嗨,有人能帮我纠正代码,以使徽标,社交共享按钮和搜索栏对齐(与顶部下方的图像相同,位于引导程序顶部栏中的同一行中),Sample image
以及带有引导程序的相应菜单导航栏。
我的代码附在下面,我能够获得所需的结构,但无法对其应用适当的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>
关于html - 顶部栏中带有徽标和社交共享按钮的区域,以及带有 bootstrap 中的搜索栏的区域,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42694043/