我将bootstrap包含在我的angularcli项目中,但是当我尝试包含导航栏时,没有任何元素正常工作.我在网站上使用标准的boostrap导航栏示例,但它看起来很奇怪：

我的项目导致导航栏无法正确加载有什么问题？

navbar.component.html

<nav>
  <buttontype="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>
  <ahref="#">Navbar</a>

  <divid="navbarSupportedContent">
    <ul>
      <li>
        <ahref="#">Home <span>(current)</span></a>
      </li>
      <li>
        <ahref="#">Link</a>
      </li>
      <li>
        <ahttps://www.jb51.cc/tag/dis/" target="_blank">disabled" href="#">disabled</a>
      </li>
    </ul>
    <form>
      <inputtype="text" placeholder="Search">
      <buttontype="submit">Search</button>
    </form>
  </div>
</nav>

.angular-cli.json

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css","styles.css"
      ],

bootstrap 4中存在一些已知问题,尤其是在navbar实现中

因此你必须安装bootstrap bootstrap@3.3.7

如果您使用的是npm,那么最好推荐以下库

npm install bootstrap@3.3.7 --save

npm install bootstrap@3.3.7 tether jquery --save

在.angular-cli.json文件中添加依赖项

"styles":[
"styles.css","../node_modules/bootstrap/dist/css/bootstrap.css"
],"scripts":[
"../node_modules/jquery/dist/jquery.js","../node_modules/tether/dist/js/tether.js","../node_modules/bootstrap/dist/js/bootstrap.js"
],

使用以下HTML

<nav>
    <div>
    <div>
    <button type="button"data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
    <span>Togglenavigation</span>
    <span></span>
    <span></span>
    <span></span>
    </button>
    <ahref="#">Angular5Website</a>
    </div>
    <div id="navbar">
    <ul>
    <li> <a href="#">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
    </ul>
    </div><!--/.nav-collapse-->
    </div>
    </nav>

从CDN加载最新的Boostrap 4和popper.js.

Codepen here.

问题.

我的下拉代码：

<div>
    <button type="button"data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">This dropdown''s menu is right-aligned</button>
    <div>
        <buttontype="button">Action</button>
        <buttontype="button">Another action</button>
        <buttontype="button">Something else here</button>
    </div>
</div>

我把它放在里面< nav class =“navbar”>它是正确的：

<nav>
  <ahref="#">Navbar</a>
  <buttontype="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>

  <divid="navbarSupportedContent">
    <div>
        <button type="button"data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Welcome</button>
        <div>
            <buttontype="button">Action</button>
            <buttontype="button">Another action</button>
            <buttontype="button">Something else here</button>
        </div>
    </div>
  </div>
</nav>

问题是,当您单击“欢迎”时,下拉菜单会出现在屏幕的右边缘之外,尽管下拉菜单右侧是类.

提议的解决方案here不起作用({margin：0}没有帮助).

题.

如何确保下拉不会超出屏幕的右边缘？

谢谢！

我也没有那个工作过.但是,我正在使用的解决方法到目前为止解决了所有问题：

.dropdown-menu-right {
    right:0;
    left:auto;
}