Bootstrap NavBar par C# <3 - page 1

Bonjour, Au lycée j'ai eu quelque cours de dev web mais pas assez a mon gout alors je me remet un peu a bootstrap. J'aimerai savoir pourquoi quand je rétrécit intentionnellement la page, il y a un si gros écart entre "Nos" et "Encens" ou encore "A" propos" (a mon avis un truc que j'ai foiré dans le css mais je trouve pas.

aussi voir si mon code est pas trop faux parce que meme si ça marche c'est pas forcément un code bien.

aussi, j'ai mis une balise span qui quand je clique est censée faire descendre les lien du menu mais quand je clique dessus il se passe rien.

et en dernier, je trouve pas comment coloré les liens quand je passe dessus avec la souris.

la première photo montre l'espacement entre les deux mots.

et la deuxième la balise span qui marche pas.

Merci a vous.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
  <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<body>
   
      
 <nav class="navbar navbar-expand-md navbar-light bg-white sticky-top">
      <div class="container-fluid">
          <a class="navbar-brand" href="#"><img src="logo.png"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarResponsive">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
          <a class="nav-link" href="#">Accueil</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Nos Encens</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">A propos</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="rechercher">
      <button class="btn btn-secondary my-2 my-sm-0" type="submit">Rechercher</button>
    </form>
  </div>
           </div>
</nav>
  
      
    </body>
      
    
    
    
    
    
    
    
    
</body>
</html>

et le css;

.navbar-brand,
.navbar-nav li a,
.navbar-text{
    line-height: 100px;
    height: 100px;
    
    font-size: 22px;
   padding-right: 120px;
    margin-right: 50px;
    border-bottom: 20px;
}

.navbar-brand{
    padding-right: 100px;
    
}

C# <3

14 mars 2019 à 19:32:09

gbl

15 mars 2019 à 20:12:21

Personne ?

Sassouquet54

16 mars 2019 à 11:03:56

Bonjour, tout d'abord tu as 2 balises </body>, enlèves-en une.

Ensuite pour l'espacement entre tes liens c'est la ligne de code CSS line-height: 100px;, si tu enlève cette ligne ou que tu l'a modifie tu verras le changement.

Pour la couleur de tes liens il te suffit d'utiliser la propriété :hover

.navbar-nav li a:hover
{
  color:red;
}

20 mars 2019 à 14:24:13

Désolé, j'avais pas vu ton message, je vais essayer ce que tu me dit des que je rentre chez moi (j'ai pas de PC)

Merci beaucoup

Bootstrap NavBar

Bootstrap NavBar

Supprimer

Modérer

Signaler le message aux modérateurs