[英]How to align right social media icon with navbar-collapse in Bootstrap 3?
I am trying to align social media icon with my navbar menu to the right but it is not working there is a gap when I am doing it. 我正在尝试将社交媒体图标与我的导航栏菜单向右对齐,但是它无法正常工作,所以我在操作时会出现间隙。
The social icon is in a separate row The navbar is also in a separate row I just want to align them to the right. 社交图标在单独的行中导航栏也在单独的行中,我只想将它们向右对齐。
The padding-right and pull-right is not working. 右填充和右填充不起作用。 Please help, Thank you very much in advance.
请帮助,非常感谢。
CSS code CSS代码
.navbar-collapse {
padding-right: 0px;
margin-right: 0px;
}
HTML codes HTML代码
<div class="row" style="height: 40px;">
<div class="container">
<div class="social pull-right">
<ul>
<li><a href="#"><i class="fa fa-lg fa-phone"></i></a>+65 652 225 25</li>
<li><a href="#"><i class="fa fa-lg fa-weixin"></i></a></li>
<li><a href="#"><i class="fa fa-lg fa-envelope-o"></i></a></li>
<li><a href="#"><i class="fa fa-lg fa-facebook"></i></a></li>
</ul>
</div>
</div>
</div>
<!--Navigation Menu and Carousel -->
<div class="row" style="background-color: black">
<div class="container">
<nav class="navbar navbar-inverse" role="navigation">
<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>
<a class="navbar-brand" href="index.html">
<img src="images/logo.png" alt="img">
</a>
</div>
<div class="navbar-collapse collapse pull-right">
<ul class="nav navbar-nav">
<li><a href="index.html">HOME</a></li>
<li><a href="blog.html">SERVICES</a></li>
<li><a href="clients.html">WORKS</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">ABOUT <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="http://www.facebook.com">Facebook</a></li>
<li><a href="http://www.twitter.com">Twitter</a></li>
<li><a href="https://plus.google.com">Google+</a></li>
<li><a href="http://www.linkedin.com">LinkedIn</a></li>
</ul>
</li>
<li class="active"><a href="contact.html">CONTACT</a></li>
</ul>
</div>
</nav>
</div>
</div>
Try something like this, using the navbar-right class from Bootstrap: 使用Bootstrap中的navbar-right类尝试以下操作:
<div class="navbar-collapse collapse pull-right">
<ul class="nav navbar-nav">
<li><a href="index.html">HOME</a></li>
<li><a href="blog.html">SERVICES</a></li>
<li><a href="clients.html">WORKS</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">ABOUT <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="http://www.facebook.com">Facebook</a></li>
<li><a href="http://www.twitter.com">Twitter</a></li>
<li><a href="https://plus.google.com">Google+</a></li>
<li><a href="http://www.linkedin.com">LinkedIn</a></li>
</ul>
</li>
<li class="active"><a href="contact.html">CONTACT</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><i class="fa fa-lg fa-phone"></i></a>+65 652 225 25</li>
<li><a href="#"><i class="fa fa-lg fa-weixin"></i></a></li>
<li><a href="#"><i class="fa fa-lg fa-envelope-o"></i></a></li>
<li><a href="#"><i class="fa fa-lg fa-facebook"></i></a></li>
</ul>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.