【问题标题】:Bootstrap 5 navbar-brand and navbar-toggler behaviorBootstrap 5 navbar-brand 和 navbar-toggler 行为
【发布时间】:2021-03-26 12:29:13
【问题描述】:

是什么让 navbar-brand 元素将 navbar-toggler 按钮推到 bootstrap 5.0.0 中导航栏的右侧

例如,如果我将此行添加到导航栏的导航切换按钮之前,导航切换按钮将被强制到导航栏的右端。

<a class="navbar-brand" href="#">Company Name</a>

<button class="navbar-toggler p-0 border-0" type="button" data-bs-toggle="sidemenu" aria-label="Navigation Toggle">
    <span class="navbar-toggler-icon"></span>
</button>

但是,如果我删除带有 &lt;a&gt; 标记的前一行或将其放在 &lt;button&gt; 元素之后,那么导航切换器(按钮)将对齐到导航栏的 left .

navbar-brand 类是什么让这种情况发生?我希望能够在不使用 navbar-brand 对象的情况下获得相同的效果。

【问题讨论】:

  • 对于编辑我帖子的人,我拒绝了编辑,因为它没有做出任何实质性的改变。您所做的只是将我的代码放在第三方代码渲染器中。但是,上面的代码并不打算渲染(或运行)。它只是为了澄清这个问题。感谢您的英勇尝试,但不应仅仅为了改变或添加铃声、口哨或闪亮的按钮而改变事物。仅当更改实际上改进或阐明了原始事物的预期目的时,才应更改事物。

标签: twitter-bootstrap navbar


【解决方案1】:

此行为的发生是由于 flexbox 的 justify-content: space-between; 属性设置在这两个元素的父元素上。

您可以使用CTRL+SHIFT+I 打开开发者窗口并查看此行为:)

【讨论】:

  • 感谢您的回复。我想我需要研究一下 Flex(在我巨大的待办事项列表上)。再次感谢。
  • 尊敬的先生,我很高兴在这里帮助人们和开发人员。最欢迎 :) 如果您愿意,我可以推荐一些最好的免费教程来学习 flexbox。如果您需要有关 Flexbox 或 CSS-Grids 的任何帮助,我会在这里为您提供帮助 :) 祝您在 Flexbox 之旅中一切顺利。请评价并接受我的回答,以便其他开发人员从中受益。
  • 感谢@ImranRafiqRather 提供的所有帮助。上图很漂亮。
猜你喜欢
  • 1970-01-01
  • 2017-03-08
  • 2017-11-18
  • 1970-01-01
  • 2023-03-13
  • 2013-10-19
  • 1970-01-01
  • 2016-04-04
  • 2018-03-12
相关资源
最近更新 更多