Css 使用bower安装的引导程序时导航栏显示不正确

Css 使用bower安装的引导程序时导航栏显示不正确,css,twitter-bootstrap,Css,Twitter Bootstrap,使用bower软件包管理器安装的引导程序时,导航栏无法工作 不过,导航栏下面列表中的文章是由引导程序设计的。最后,我更改了引导css的链接,然后导航栏的样式就正确了。有人知道这是为什么吗 <!DOCTYPE html> <html> <head> <title>Articles</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com

使用bower软件包管理器安装的引导程序时,导航栏无法工作

不过,导航栏下面列表中的文章是由引导程序设计的。最后,我更改了引导css的链接,然后导航栏的样式就正确了。有人知道这是为什么吗

<!DOCTYPE html>
<html>

<head>
    <title>Articles</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> // works
    // <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"> // not working for navbar
</head>

<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header"><a class="navbar-brand" href="#">WebSiteName</a></div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Page 1</a></li>
                <li><a href="#">Page 2</a></li>
                <li><a href="#">Page 3</a></li>
            </ul>
        </div>
    </nav>
    <div class="container">
        <h1>Articles</h1>
        <ul class="list-group">
            <li class="list-group-item">Article One</li>
            <li class="list-group-item">Article Two</li>
            <li class="list-group-item">Article Three</li>
            <li class="list-group-item">MyTitle</li>
        </ul>
        <br>
        <hr>
        <footer>
            <p>Copyright &copy; 2019</p>
        </footer>
    </div>
</body>

</html>

文章
//工作
////不为navbar工作
文章
    第一条 第二条 第三条
  • MyTitle


版权及副本;2019年


尝试添加bootstrap.min.css而不是bootstrap.css

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">

尝试添加bootstrap.min.css而不是bootstrap.css

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">

“bower\u组件/bootstrap/dist/css/bootstrap.css” 看起来他们从bower\u components\bootstrap\bower.json中删除了“dist/css/bootstrap.css”

我们通过覆盖我们的项目bower.json临时解决了这个问题。对我们来说,这很好。但是在等待来自引导的解决方案

"overrides":{
    "bootstrap" : {
         "main": [
            "less/bootstrap.less",
            "dist/css/bootstrap.css",
            "dist/js/bootstrap.js"
          ]
    }
}
“bower_components/bootstrap/dist/css/bootstrap.css” 看起来他们从bower\u components\bootstrap\bower.json中删除了“dist/css/bootstrap.css”

我们通过覆盖我们的项目bower.json临时解决了这个问题。对我们来说,这很好。但是在等待来自引导的解决方案

"overrides":{
    "bootstrap" : {
         "main": [
            "less/bootstrap.less",
            "dist/css/bootstrap.css",
            "dist/js/bootstrap.js"
          ]
    }
}