角度/引导程序-导航栏无法正确显示 [英] Angular/Boostrap - Navbar doesn't display properly

问题描述

最近我在项目中添加了Bootstrap 4，jQuery和Popper，但是问题是当我渲染网页时，它显示了这样的导航栏(它在名为header的组件中):

Recently I added Bootstrap 4, jQuery and Popper to my project, but the problem is when I render my webpage it shows the navbar like this (which it goes in a component called header):

我也添加了我的angular-cli.json:

Also I added in my angular-cli.json:

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

HTML代码

<nav class="navbar navbar-light bg-light">
  <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse"
          data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
          aria-expanded="false" aria-label="Toggle navigation"></button>
  <div class="collapse navbar-expand-md" id="collapsibleNavId">
    <a class="navbar-brand" href="#">My App/Logo with Text</a>
    <ul class="nav navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Nav 1 <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Nav 2</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="" id="dropdownId"
           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Nav 3 dropdown</a>
        <div class="dropdown-menu" aria-labelledby="dropdownId">
          <a class="dropdown-item" href="#">Action 1</a>
          <a class="dropdown-item" href="#">Action 2</a>
        </div>
      </li>
    </ul>
    <form class="form-inline float-xs-right">
      <input class="form-control" type="text" placeholder="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

推荐答案

导航栏中缺少某些类.看一下下面的代码以及那里使用的类和组件.如果您仍有疑问，请随时提问.但是该代码示例应该可以帮助您解决此问题.

You are missing some classes in your navbar. Take a look at the following code and the classes and components used there. If you still have questions, feel free to ask. But that code example should help you to sort out this problem.

此外，d-lg-none类表示:从断点处隐藏该内容.这就是您想要的吗?切换器的工作方式并不是这样.Bootstrap被设计为 mobile-first ！意味着切换器是默认设置.然后使用navbar-expand-lg类，该类基本上说:隐藏切换器，并从'lg'(= large)断点开始将导航栏扩展为水平."

Also, the d-lg-none class says: "hide this from the breakpoint large and above. Is that what you want? It's NOT how the toggler is designed to work. Bootstrap is designed to be mobile-first! Meaning the toggler is the default. You then use the navbar-expand-lg class which basically says: "hide the toggler and expand the navbar into horizontal from the 'lg' (=large) breakpoint onwards."

这是我的代码示例:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" 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>

  <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 dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

这篇关于角度/引导程序-导航栏无法正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！