![](/img/trans.png)
[英]Twitter bootstrap 3 navbar navbar-right outside navbar-collapse
[英]How to align right social media icon with navbar-collapse in Bootstrap 3?
我正在嘗試將社交媒體圖標與我的導航欄菜單向右對齊,但是它無法正常工作,所以我在操作時會出現間隙。
社交圖標在單獨的行中導航欄也在單獨的行中,我只想將它們向右對齊。
右填充和右填充不起作用。 請幫助,非常感謝。
CSS代碼
.navbar-collapse {
padding-right: 0px;
margin-right: 0px;
}
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>
嘗試這個
.social ul li{
float:right;
list-style:none;
padding-right:15px
}
<div class="social col-lg-6 pull-right">
使用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.