html - 让项目在导航栏折叠时向左对齐（引导程序）

Question

我想要一个导航栏，其中项目默认向右对齐，但在导航栏折叠时，它们向左对齐。

这是我的 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;
}

谢谢你。

标签： htmlcssbootstrap-4

Answer 1

将此类添加到您的ul标签：mr-auto