为啥 pull-right 类在 bootstrap 版本 4.1.0 上不起作用？ [复制]

Posted 2023-03-06

【中文标题】为啥 pull-right 类在 bootstrap 版本 4.1.0 上不起作用？ [复制]

【英文标题】：why pull-right class not working on bootstrap version 4.1.0? [duplicate]为什么 pull-right 类在 bootstrap 版本 4.1.0 上不起作用？ [复制]

【发布时间】：2018-10-19 06:39:31

【问题描述】：

以前我们使用引导程序版本 3+。现在我们使用 4.1.0。当我尝试使用 pull-right 和 pull-left 对齐时，它不起作用。即使我尝试使用 float-right/float left 它也不起作用。 （我在图片中提到了它的显示位置以及我希望它显示的位置）

代码在这里：

<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" > <span class="hidden-sm">Welcome</span> </a>
    <ul class="dropdown-menu">
        </ul>
    </li>
    </ul>
    </div>
    </nav>

在上面的代码中，我首先尝试使用pull-right 和pull-left，然后在 我使用了几个谷歌搜索 float-left 和 float-right.still 我的预期结果没有出现。请帮忙

对于@soheilPs 参考

【问题讨论】：

V4 依赖 flexbox 所以最好忘记浮动并考虑 flexbox 对齐

你应该阅读这个getbootstrap.com/docs/4.1/utilities/flex

你有自定义 CSS 吗？专门用于导航栏。

【参考方案1】：

检查更新日志： https://getbootstrap.com/docs/4.0/migration/#utilities

为响应添加了 .float-sm,md,lg,xl-left,right,none 类 浮动并删除 .pull-left 和 .pull-right 因为它们是多余的 到 .float-left 和 .float-right。

所以在你的情况下应该是

class="float-sm-right"

【讨论】：

我试过你的不适合我

【参考方案2】：

你可以使用 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" > <span class="hidden-sm">Welcome</span> </a>
        <ul class="dropdown-menu">
        </ul>
      </li>
    </ul>
  </div>
</nav>

【讨论】：

您好，谢谢。你的一个为我工作。但在我的左边和右边的家庭和公司名称显示如下一行。我不知道如何在这里添加图片，所以我编辑了我的 qstn 并添加了该图片以供您参考

我很高兴它有帮助。

如果你能帮我让它像单行一样显示，我很感激

您的代码中的某处可能存在冲突，当我对其进行测试时，它可以在一行中正常工作：jsfiddle.net/mssoheil88/2cj7yjdj

你不知道为什么......稍后会检查我自己。感谢您的帮助。