Bootstrap 4 navbar无法使用角度5 [英] Bootstrap 4 navbar is not working with angular 5

问题描述

我正在尝试添加引导项目，并且角色项目并没有反映在浏览器中。

 详情如下所示。 
版本：
 Angular CLI：1.7.3 
节点：9.7.1 
操作系统：win32 x64 
角度：5.2.8 
  
 
 
 
使用角度cli安装bootstrap和jquery 
 
 
 bootstrap：^ 4.0.0
jquery：^ 3.3.1
  
 
 
 
 
 styles：[
styles）添加到.angular-cli.json中的$ b 
添加到
 .css，
../node_modules/bootstrap/dist/css/bootstrap.min.css
，
scripts：[
../node_modules /jquery/dist/jquery.min.js，
../node_modules/bootstrap/dist/js/bootstrap.min.js
，
  
 
 
 
以下是我的html代码。
 < nav class =navbar navbar-default> 
< div class =container-fluid> 
< div class =navbar-header> 
< span class =navbar-brand> Angular + Bootstrap< / span> 
< / div> 
< ul class =nav navbar-nav> 
< li class =active>< a href =＃> 
连结< span class =sr-only>（目前）< / span> 
< / a>< / li> 
< li>< a href =＃>连结< / a>< / li> 
< li class =dropdowndropdown> <！ -  {1}  - > 
< a dropdownToggle role =button> <！ -  {2}  - > 
下拉式< span class =caret>< / span>< / a> 
< ul * dropdownMenu class =dropdown-menu> <！ -  {3}  - > 
< li>< a href =＃>动作< / a>< / li> 
< li>< a href =＃>另一个动作< / a>< / li> 
< li>< a href =＃>其他内容< / a>< / li> 
< li role =separatorclass =divider>< / li> 
< li>< a href =＃>分离式连结< / a>< / li> 
< li role =separatorclass =divider>< / li> 
< li>< a href =＃>另一个分离的连结< / a>< / li> 
< / ul> 
< / li> 
< / ul> 
< / div> 
< / nav> 
  
我在浏览器中获取视图，并且没有在浏览器控制台中收到任何错误。 
 在浏览器中输出 
 
 
 
感谢您的帮助。
解决方案
您已安装bootstrap 4并使用引导程序3版navbar代码。 
这里是bootstrap 4 navbar的示例代码。在最新的bootstrap 4版本中，一些类已经发生了变化。 
 
 
 < nav class =navbar navbar-expand-sm bg-light> 
< ul class =navbar-nav> 
< li class =nav-item> 
< a class =nav-linkhref =＃>连结1< / a> 
< / li> 
< li class =nav-item> 
< a class =nav-linkhref =＃>连结2< / a> 
< / li> 
< li class =nav-item> 
< a class =nav-linkhref =＃>连结3< / a> 
< / li> 
< / ul> 
< / nav> 
  
了解更多信息，请参阅链接 
 
Hi, I am trying to add bootstrap with angular project and the styling is not reflecting in the browser.
  The details are as below.
Versions:
Angular CLI: 1.7.3
Node: 9.7.1
OS: win32 x64
Angular: 5.2.8
installed bootstrap and jquery using angular cli
"bootstrap": "^4.0.0"
"jquery": "^3.3.1"
in .angular-cli.json added as below
  "styles": [        
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],
Below is the code in my html.
<nav class="navbar navbar-default">
  <div class="container-fluid">
      <div class="navbar-header">
         <span class="navbar-brand">Angular + Bootstrap</span>
      </div>
      <ul class="nav navbar-nav">
          <li class="active"><a href="#">
            Link <span class="sr-only">(current)</span>
          </a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown" dropdown> <!-- {1} -->
              <a dropdownToggle role="button"> <!-- {2} -->
                Dropdown <span class="caret"></span></a>
              <ul *dropdownMenu class="dropdown-menu"> <!-- {3} -->
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">One more separated link</a></li>
              </ul>
          </li>
      </ul>
  </div>
</nav>
I am getting the view in browser as below and not getting any errors in the browser console. 
output in browser

Thanks for your help in advance.
解决方案
you have installed bootstrap 4 and using bootstrap 3 version navbar code.
here the sample code for bootstrap 4 navbar.Some classes has been changed in latest bootstrap 4 version.
<nav class="navbar navbar-expand-sm bg-light">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>
</nav>
for more info refer this link

                        
这篇关于Bootstrap 4 navbar无法使用角度5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！