为什么pull-right class不能在bootstrap 4.1.0版上运行？

Question

以前我们使用bootstrap版本3+。现在我们使用4.1.0。当我尝试使用右拉和拉左对齐时，它不起作用。即使我尝试使用float-right / float也不行。 （我在图片中提到它显示的位置以及我希望它显示在哪里）

代码：

<nav class="navbar navbar-static-top">
        <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
    <span class="sr-only">Toggle navigation</span>
        </a>
    <div class="header_text float-left ">Home</div>
    <div class="header_text float-right">Company Name</div>
    <div class="navbar-custom-menu ">
    <ul class="nav navbar-nav">
    <li class="dropdown user user-menu">
    <a href="#" class="dropdown-toggle float-right" data-toggle="dropdown"> <img src="./Images/user2-160x160.jpg" class="user-image" alt="User Image"> <span class="hidden-sm">Welcome</span> </a>
    <ul class="dropdown-menu">
        </ul>
    </li>
    </ul>
    </div>
    </nav>

在上面的代码中，我首先尝试使用pull-right和pull-left，然后尝试使用float-left和float-right  很少谷歌搜索我使用$scope.primaryColor={"color":colorVar}; //colorVar is the color in hex 和<input required name="email" ng-model="email" placeholder="hi@whatever.com" ng-style=""> 。仍然没有预期的结果。请帮助

@soheilPs参考

Answer 1

你可以使用ml-auto和mr-auto

<nav class="navbar navbar-static-top">
  <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
    <span class="sr-only">Toggle navigation</span>
  </a>
  <div class="header_text mr-auto">Home</div>
  <div class="header_text ml-auto">Company Name</div>
  <div class="navbar-custom-menu ">
    <ul class="nav navbar-nav">
      <li class="dropdown user user-menu">
        <a href="#" class="dropdown-toggle ml-auto" data-toggle="dropdown"> <img src="./Images/user2-160x160.jpg" class="user-image" alt="User Image"> <span class="hidden-sm">Welcome</span> </a>
        <ul class="dropdown-menu">
        </ul>
      </li>
    </ul>
  </div>
</nav>