Javascript 引导4导航栏不适用于angular 5
您好,我正在尝试添加带角度项目的引导,但样式没有反映在浏览器中Javascript 引导4导航栏不适用于angular 5,javascript,html,css,bootstrap-4,angular5,Javascript,Html,Css,Bootstrap 4,Angular5,您好,我正在尝试添加带角度项目的引导,但样式没有反映在浏览器中 The details are as below. Versions: Angular CLI: 1.7.3 Node: 9.7.1 OS: win32 x64 Angular: 5.2.8 使用angular cli安装引导和jquery "bootstrap": "^4.0.0" "jquery": "^3.3.1" in.angular-cli.json添加如下 "styles": [ "s
The details are as below.
Versions:
Angular CLI: 1.7.3
Node: 9.7.1
OS: win32 x64
Angular: 5.2.8
使用angular cli安装引导和jquery
"bootstrap": "^4.0.0"
"jquery": "^3.3.1"
in.angular-cli.json添加如下
"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"
],
下面是我的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>
我在浏览器中获得如下视图,在浏览器控制台中没有任何错误。
提前感谢您的帮助。试试这个
转到应用程序文件夹->src
打开style.css并粘贴到下面的代码中
@导入~bootstrap/dist/css/bootstrap.css 试试这个
转到应用程序文件夹->src
打开style.css并粘贴到下面的代码中
@导入~bootstrap/dist/css/bootstrap.css 您已安装bootstrap 4并使用bootstrap 3版本的导航条形码。 这里是Bootstrap4导航栏的示例代码。在最新的Bootstrap4版本中,某些类已经更改
<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>
有关更多信息,请参阅此您已安装bootstrap 4并使用bootstrap 3版本导航条形码。 这里是Bootstrap4导航栏的示例代码。在最新的Bootstrap4版本中,某些类已经更改
<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>
有关更多信息,请参阅此@Sankar此解决方案有用吗?酷。请用绿色勾号确认,以便对以后引用此解决方案的其他人有用。@Sankar此解决方案有用吗?酷。请用绿色勾号确认,以便对以后引用此解决方案的其他人有用。我猜添加../node_modules/bootstrap/dist/css/bootstrap.min.css的.angular.cli.json样式将包括css文件。在style.css中不需要另一个显式导入语句。有人能确认我所说的是否正确吗?我猜在.angular.cli.json样式中添加../node_modules/bootstrap/dist/css/bootstrap.min.css将包括css文件。在style.css中不需要另一个显式导入语句。有人能证实我说的是对还是错吗。