我在Bootstrap中扩展navbar-right时遇到问题。我需要它来适应其中的所有元素。这是怎么回事:
我无法显示个人资料图片和用户名。我已经尝试过“清除:两者”和普通的东西。当我扩展UL的大小时,它将破坏父DIV。当我尝试扩展LI的大小时,它什么也没做。这是我的代码:
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#"><img src="images/logo.png" class="logo"> <span class="site-title">Privy Personal</span></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Files</a></li>
<li class="active"><a href="#">Sharing</a></li>
<li><a href="#contact">Recent</a></li>
<li><a href="#">Deleted</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><img src="images/Search.svg"> </a></li>
<li><a href="#"><img src="images/Notification.svg"> </a></li>
<li><a href="#"><span class="username">Tony Stark</span><img src="http://placehold.it/25x25" class="profile"></a></li>
</ul>
</div><!--/.nav-collapse -->
</nav> <!-- End Fixed Nav -->
谁能帮我?
最佳答案
在<div class="container-fluid">
之后添加<nav>
,并使用边距调整名称和图片对齐方式。
尝试这个
查看演示here
HTML:
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#"><span class="site-title">Privy Personal</span></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Files</a></li>
<li class="active"><a href="#">Sharing</a></li>
<li><a href="#contact">Recent</a></li>
<li><a href="#">Deleted</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><i class="fa fa-user"></i> </a></li>
<li><a href="#"><i class="fa fa-user"></i> </a></li>
<li><a href="#"><span class="username">Tony Stark</span><img src="http://placehold.it/25x25" class="profile img-circle"></a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<!-- End Fixed Nav -->
CSS:
.username {
margin-right: 5px;
}
.profile {
margin-top: -7px;
}
希望对您有所帮助:)