我正在使用 Angular-CLI 和 Node.Js 构建一个 SPA 应用程序,使用 WebStorm,但我不明白为什么我的导航栏不会崩溃。 当页面足够小时,导航项就会消失。

我没有使用 navbar-expand 类(而是使用不应防止折叠的 navbar-expand-sm),除此之外,我没有发现任何应该导致此问题的内容。

我的 navbar.component.html:

<nav class="navbar navbar-expand-sm navbar-brown fixed-top">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav mx-auto">
      <li class="nav-item">
        <a class="nav-link" (click)="clickedHome()">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" (click)="clickedForums()">Forums</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" (click)="clickedMyZone()">MyZone</a>
      </li>
    </ul>
  </div>
</nav>

<div class="jumbotron text-center" id="primary_jumbotron_display">
  <div id="primaryDisplayBorder">
    <div id="primaryDisplayContent">{{primaryDisplayBorderTitle}}</div>
    <p>{{primaryDisplayBorderContent}}</p>
  </div>
</div>

我的 navbar.component.css:

@import url(//db.onlinewebfonts.com/c/460e8698563db983434874f8f371a7d1?family=Museo);

.jumbotron {
  height: 40vh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#primary_jumbotron_display {
  background-image: url('client/assets/images/FriendLancer_banner.jpg');
  font-family: Museo;
  font-size: x-large;
  background-size: cover;
  align-content: center;
  color: saddlebrown;
  margin-bottom: 0;
}

#primaryDisplayContent {
  font-size: 7ex;
}

.navbar-brown {
  background-color: saddlebrown !important;
  box-shadow: #222222;
}

.navbar {
  -webkit-box-shadow: 0 8px 6px -6px black;
  -moz-box-shadow: 0 8px 6px -6px black;
  box-shadow: 0 8px 6px -6px black;
}

.navbar-nav {
  font-family: Museo;
  font-size: medium;
}

.navbar-nav > li {
  padding-left: 15px;
  padding-right: 15px;
}

.nav-item {
  transition: all 0.3s ease;
}

.navbar-nav a {
  color: silver;
}

.navbar-nav a:hover {
  color: saddlebrown;
  letter-spacing: 1.3px;
  background-image: linear-gradient(to right, sandybrown, rosybrown);
}

任何帮助,将不胜感激。

  ask by Inbar translate from so

本文未有回复,本站智能推荐:

2回复

在angular-cli.json中导入全局样式并将其分别添加到每个组件的每个CSS中,有什么区别?

我在angular-cli.json "../node_modules/bootstrap/dist/css/bootstrap.min.css"有样式。 为什么当我删除这些行并将其添加到每个组件的每个CSS中@import "{correct path to every directory/
1回复

导航栏没有折叠Boostrap

当我打开我的 html 文件时,我在导航栏上找不到折叠按钮。 这里没有出现折叠按钮是我的 html 代码:<!DOCTYPE html><html> <head> <title>BoostUp - Boostez vos proje
1回复

导航栏展开并突然折叠

因此,当我单击我的汉堡包图标时,它会更改为关闭图标。 此外,我的导航栏会扩展几分之一秒,但它又塌陷了。 当我点击关闭按钮后,导航项目在几分之一秒内变得可见时会发生同样的事情。 我已经为移动宽度添加了我的 CSS 我无法弄清楚有什么帮助吗? HTML CSS 最大宽度 376px
1回复

创建可折叠导航栏

我想制作一个主可折叠导航栏,将包含其他导航栏(可折叠)。 我有一个,但我无法制作一个主可折叠导航栏,其中包含可折叠的导航栏。 就像在这段代码中一样,我将'Profile'作为一个可折叠栏,并希望将'navigation'作为另一个可折叠的,它将包含'Profile'导航栏 我试过编辑下面
1回复

Bootstrap折叠导航栏消失

我环顾四周,但找不到解决此问题的方法。 当我将窗口大小更改为小到足以让我的导航栏链接被折叠图标替换时,当我单击显示链接的图标时,它们真的很快就会显示出来,就像它们应该显示的那样然后消失。 . 所以我点击图标,链接显示为它们应该显示的,然后它们在半秒后消失这是我的导航栏代码 我的 body 标签底部还
2回复

如何折叠移动设备的导航栏?

.navbar { background:white; border: 1px solid #008080; border-width: 1px 0; box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75), 0 8px 6px -6px black;
2回复

如何判断导航栏是否折叠?

我有一个导航栏: 当导航栏折叠(即未展开)时,我想为页面上的其他元素设置样式。 javascript 中是否有一种简单的方法可以判断导航栏何时折叠与未折叠? 试过这个: 但它不起作用。 提前致谢。
1回复

导航栏按钮折叠到侧边栏

有没有办法在导航栏的折叠按钮上实现侧边栏? 当我缩小屏幕时,我会在导航栏上看到折叠按钮,上面有所有按钮。 当我单击该折叠按钮时,它会展开导航栏并显示按钮。 有没有一种方法可以代替这个展开按钮,而是在右侧或右侧显示一个侧栏,占据整个屏幕并显示导航按钮? 演示