Partage
  • Partager sur Facebook
  • Partager sur Twitter

Bootstrap NavBar

    14 mars 2019 à 19:32:09

    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;
        
    }





    • Partager sur Facebook
    • Partager sur Twitter
    gbl
      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;
      }



      • Partager sur Facebook
      • Partager sur Twitter
        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

        • Partager sur Facebook
        • Partager sur Twitter
        gbl

        Bootstrap NavBar

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        • Editeur
        • Markdown