Je ne parviens pas à faire fonctionner la barre de navigation lorsque j'utilise le bootstrap installé par le gestionnaire de paquets bower.

Les articles de la liste sous la barre de navigation sont cependant très bien stylisés par le bootstrap. À la fin, j'ai changé le lien vers le CSS bootstrap, puis la barre de navigation est correctement stylisée. Quelqu'un sait pourquoi c'est?

<!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>
0
Kasper Hansen 8 nov. 2019 à 13:08

2 réponses

Essayez d'ajouter bootstrap.min.css au lieu de bootstrap.css

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
1
Par Tha 8 nov. 2019 à 10:21

"bower_components / bootstrap / dist / css / bootstrap.css" On dirait qu'ils suppriment "dist / css / bootstrap.css" de bower_components \ bootstrap \ bower.json

Nous corrigeons ce problème temporairement en remplaçant notre projet bower.json. pour nous ça marche bien. mais en attendant une solution de bootstrap.

"overrides":{
    "bootstrap" : {
         "main": [
            "less/bootstrap.less",
            "dist/css/bootstrap.css",
            "dist/js/bootstrap.js"
          ]
    }
}
1
Priyanka 8 nov. 2019 à 10:30