问答中心分类: CSSBootstrap 将导航栏项目向右对齐
0
匿名用户 提问 18小时 前

如何将导航栏项目右对齐?
我想登录并注册到右边。但我尝试的一切似乎都不起作用。
导航栏图片
这是我到目前为止所尝试的:

  • around the with the atribute: style="float: right"
    around the with the atribute: style="text-align: right"
    tried those two things on the tags
    tried all those things again with !important added to the end
    changed nav-item to nav-right in the
    added a pull-sm-right class to the
    added a align-content-end class to the
    This is my code:

    Navbar

    Home (current)

    Features

    Pricingg

    Login

    Register

    @yield('content')

max 回复 18小时 前

导航栏是使用 alpha 6 版本的 flexbox 构建的。

max 回复 18小时 前

是的,所以我必须做些什么才能让它与右边对齐。我已经尝试了几个 flexbox 的东西,但没有任何运气。 :/

21 Answers
0
Craig van Tonder 回答 18小时 前

就我而言,我只需要一组导航按钮/选项,并发现这将起作用:

<div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Sign Out</a>
    </li>
  </ul>
</div>

因此,您将添加justify-content-end到 div 并省略mr-auto在名单上。
这里有一个工作示例.

Craig van Tonder 回复 18小时 前

@numediaweb 在 OPs 示例中,他在导航中使用了两个元素,一个左对齐,一个右对齐;我只使用了一个并将其对齐到右侧。这不是正确的答案,但它有助于回答问题的细微变化;)

Zim 回复 18小时 前

这适用于单个导航栏导航,但是mr-auto方法用于引导文档.

qwaz 回复 18小时 前

mr-auto在文档中使用,但不用于将项目向左对齐。如本文所述,此答案在语义上是正确的:blog.getbootstrap.com/2017/01/06/bootstrap-4-alpha-6

barefootsanders 回复 18小时 前

问题是您是要对齐 2 个链接列表还是 1 个。如果只有 1 个,那么您的答案有效并且对我非常有帮助。谢谢!

Suhail Akhtar 回复 18小时 前

它对我有用,但我不知道为什么这个答案上面的那个不起作用。

0
Muhammad Tarique 回答 18小时 前

对于那些仍在 BS4 中遇到此问题的人,只需尝试以下代码 –

<ul class="navbar-nav ml-auto">
NickG 回复 18小时 前

不 – 这会使所有内容都向右对齐。问题是他只想将单个项目向右对齐。

Pierre de LESPINAY 回复 18小时 前

查看官方文档m*-auto它将内容向左或向右推送,具体取决于您放置课程的位置

avocado 回复 18小时 前

@PierredeLESPINAY,是的ml-auto确实将内容推到最右边的位置,但我只是想知道为什么mr-0不能做这项工作?

Addison Klinke 回复 18小时 前

@NickG 如果您希望某些项目左对齐而其他项目右对齐,则可以有多个<ul>元素,每个元素都有适当的m*-auto

0
geet Sebastian 回答 18小时 前

在引导程序 4 上
如果要将品牌对齐到左侧并将所有导航栏项对齐到右侧,请更改默认值mr-automl-auto

<ul class="navbar-nav ml-auto">
e-info128 回复 18小时 前

这有什么例子吗?

0
ClemC 回答 18小时 前

Bootsrap 4.0.0-beta.2,这里列出的答案都不适合我。最后,Bootstrap 网站给了我解决方案,不是通过它的文档,而是通过它的页面源代码……
Getbootstrap.com 对齐他们的权利navbar-nav在以下课程的帮助下向右:ml-md-auto.

Maria Campbell 回复 18小时 前

为我工作得很好。其他什么都没做。

navneethc 回复 18小时 前

尝试了查找 Bootstrap 网页源本身的建议,并且在撰写本文时(2021 年 1 月 16 日),它是ms-md-auto.至少在我的情况下有效。

0
Maizied Hasan Majumder 回答 18小时 前

使用此代码将项目向右移动。

<div class="collapse navbar-collapse justify-content-end">
Ryan S 回复 18小时 前

当你有一个折叠的菜单时,这将不起作用,但是,使用 ml-auto 它仍然可以工作,因为当菜单折叠时,项目仍占宽度的 100%,因此不会应用边距。