我想要一个导航栏,默认情况下项目在右侧对齐,但是在导航栏折叠时,它们在左侧对齐。
这是我的HTML:
<nav class="navbar">
<div class="container-fluid" width='300px'>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<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="img/UWCL_logo_white.png" alt="Gibbs Lab" style="width:80px;height:auto;"></a>
</div>
<div class="collapse navbar-collapse navbar-left " id="myNavbar">
<ul class="nav navbar-nav navText " style='list-style-type: square'>
<li ><a class="dropdown-divider" href="production/index.html" id="navText">About</a></li>
<li><a href="research/index.html" id="navText">Staff</a></li>
<li><a href="education/index.html" id="navText">Data Dashboards</a></li>
<li><a href="people/index.html" id="navText">Current Projects</a></li>
</ul>
</div>
</div>
</nav>
而且,当折叠时:
如何使这些项目(在第二张图片中)与页面左侧对齐?我尝试了以下方法,但没有运气:
.navbar-collapse {
text-align:left;
float:left;
}
谢谢。
答案 0 :(得分:0)
将此类别添加到您的 ul 标签:mr-auto