Bootstrap 4 Beta 2 导航栏品牌对齐

Question

与这个问题非常相似：bootstrap4 nav not working properly 似乎没有得到解决。

我正在将我的应用程序从 Angular 4 移动到 Angular 5，在 "npm update" 的过程中，我移动到 "bootstrap": "4.0.0-beta .2"，NavBar 品牌现在右对齐。而且无论屏幕多宽，项目都会折叠。

解决这个问题。我实际上做到了 ng new nav-app。因此创建了全新的应用程序。

然后我安装了Bootstrap、Jquery、本文提到的Popper：http://colinstodd.com/blog/post/how-to-install-bootstrap-4-beta-in-angular-4-as-a-dependency

这是我的 angular-cli.json：

      "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css"
  ],
  "scripts": [
    "../node_modules/jquery/jquery.min.js",
    "../node_modules/popper.js/dist/umd/popper.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.bundle.js"
  ],

并且我把Bootstrap官网的Nav Bar例子：https://v4-alpha.getbootstrap.com/components/navbar/放到了app.component.html

<nav class="navbar navbar-toggleable-md navbar-dark bg-dark">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand" href="#">Navbar</a>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </div>
    </nav>

结果如下所示： 1. 切换（汉堡包图标）在我点击它时起作用。但是位置颠倒了，不管浏览器window有多宽，汉堡包图标都不会展开。

我认为 bootstrap.css 绝对可以正常工作，因为我制作了一个按钮，并且它具有适当的 bootstrap 颜色。

问：如何控制汉堡包图标出现与否？（当屏幕较宽时，导航项应显示为没有汉堡包图标。）有人可以解释一下 Beta Bootstrap 发生了什么吗？我的代码曾用于 Bootstrap 的早期版本，包括 4 Alpha。

我的产品代码导航栏在屏幕足够宽以显示所有内容时正确显示所有导航项。它在正确的时间崩溃。我想弄清楚这是一个 Angular 5 问题还是实际上 Boostrap 决定从 4 Alpha 到 4 Beta 并决定完成改变他们的 css class 位置。

Answer 1

navbar-expand-* class 就是你所缺少的。

尝试添加 navbar-expand-lg。

文档在这里：

https://getbootstrap.com/docs/4.0/components/navbar/

alpha 版本无可救药过时!

P.S。 Bootstrap 4 beta 3 是 Bootstrap 4 的最新版本。下一个版本将是 Bootstrap 4 final。

Bootstrap 4 Beta 2 导航栏品牌对齐

Bootstrap 4 Beta 2 Nav Bar Brand Alignment

css

bootstrap-4

angular

angular5