如何在引导程序上将列表项向右对齐？答案

【问题标题】：How to align listitems to the right, on bootstrap?如何在引导程序上将列表项向右对齐？
【发布时间】：2017-04-24 10:32:02
【问题描述】：

look

我正在开发一个网站，我想知道如何将两个列表项（注册和登录）对齐到网站的右侧，同时保留其他项？

我正在使用哈巴狗。

  #bs-example-navbar-collapse-1.collapse.navbar-collapse
   ul.nav.navbar-nav
    li
      a(href="#") Product
    li
      a(href="#") Features
    li
      a(href="#") Pricing
    li
      a(href="#") Blog
    li
      a(href="#") Contact Us
    li
      a(href="sign-up") Sign Up
    li
      a(href="#") Login

【问题讨论】：

在问题中包含您的代码
欢迎来到 Stack Overflow！寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及重现问题本身所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请参阅：How to create a Minimal, Complete, and Verifiable example。
将代码包含为代码，而不是图像。此外，这两张图片似乎都显示了相同的代码。
编辑了问题
你在使用 Bootstrap V4 吗？

标签： html css twitter-bootstrap pug

【解决方案1】：

引导程序 4

如果您使用 Bootstrap V4，这相当简单。您只需要应用 .navbar-toggler-right 修饰符类。默认情况下，它是响应式的，因此只会在更大的屏幕上正确显示，并堆叠在移动设备上。

nav.navbar.navbar-toggleable-md
  .collapse.navbar-collapse
    ul.navbar-nav.mr-auto.mt-2.mt-lg-0
      li
        a(href="#") Product
      li
        a(href="#") Features
      li
        a(href="#") Pricing
      li
        a(href="#") Blog
      li
        a(href="#") Contact Us
    ul.my-2.my-lg-0
      li
        a(href="sign-up") Sign Up
      li
        a(href="#") Login

阅读更多，Bootstrap Documentation on Navbar

Bootstrap 3（最新稳定版）

如果您使用的是最新的稳定版 Bootstrap，或者任何低于 4 的版本，那么这会更容易。只需像这样定义您的右对齐ul ul.nav.navbar-nav.navbar-right

nav.navbar
  .container-fluid
    ul.nav.navbar-nav
      li
        a(href="#") Product
      li
        a(href="#") Features
      li
        a(href="#") Pricing
      li
        a(href="#") Blog
      li
        a(href="#") Contact Us
    ul.nav.navbar-nav.navbar-right
      li
        a(href="sign-up") Sign Up
      li
        a(href="#") Login

阅读更多，W3Schools 有一个tutorial about Bootstrap navbars

【讨论】：