Remplissez la page avec un menu horizontalement

Donc, j'ai ce menu:Remplissez la page avec un menu horizontalement

Que puis-je faire pour remplir le menu horizontalement la page entière? Est-ce que j'utilise les mauvaises classes bootstrap? Il remplit juste une partie de la page. Quelqu'un peut-il m'apprendre quoi faire ici?

ul { 
 
    list-style-type: none; 
 
    border-bottom-style: solid; 
 
    border-bottom-color: green; 
 
    position: relative; 
 
} 
 
li { 
 
    display: inline; 
 
    padding: 30px; 
 
} 
 
#menu a { 
 
    color: black; 
 
} 
 
#menu a:hover { 
 
    color: green; 
 
    font-weight: 700; 
 
    text-decoration: none; 
 
    border-bottom-style: solid; 
 
    border-bottom-color: green; 
 
    border-bottom-width: 6px; 
 
    border-radius: 4px; 
 
}

<body> 
 
    <section> 
 
    <div class="navbar navbar-default" role="navigation"> 
 
     <div class="container-fluid wrapper"> 
 
     <div class="navbar-header"> 
 
      <ul id="menu"> 
 
      <div class="row"> 
 
       <div class="col-md-12"> 
 
       <li><img src="Imagens/Logo.png"></li> 
 
       <li id="menu1"><a href="#">About us</a></li> 
 
       <li><a href="#"> Act</a></li> 
 
       <li><a href="#"> News</a></li> 
 
       <li><a href="#"> Videos</a></li> 
 
       <li><a href="#"> Contact us</a></li> 
 
       </div> 
 
      </div> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </section> 
 
</body>

Source

2017-10-01 Lucky

Vous pouvez régler la largeur de barre de navigation en-tête à 100% avec le code ci-dessous pour faire le varbar couvrir toute la longueur horizontale mais il ne va pas à perfectionner navbar fonctionnelle.

.navbar-header{ 
    width:100% 
    }

La raison d'être, il ne ressemble à ça est peut-être une barre de navigation Bootstrap 3 que vous essayez d'utiliser avec bootstrap 4 qui est la raison pour laquelle il ne fonctionne pas. Les classes sont différentes entre BS3 et BS4.

Vérifiez http://getbootstrap.com/docs/4.0/examples/navbars/ pour obtenir des exemples d'implémentation d'une barre de navigation 4 bootstrap.

Source

2017-10-01 20:27:37 TidyDev

Im pas un expert au bootstrap et je ne sais pas pour ce que la classe est utilisée pour faire, mais si je supprime l'élément div: <div class="navbar-header"></div> cela a fonctionné dans mon chrome.

Avec chromes Developer Tools vous êtes en mesure de trouver des bogues comme celui-ci (Ctrl + Maj + I ou Ctrl + Maj + C pour utiliser l'Inspecteur des éléments directement)

Peut-être que vous pouvez ajouter style="text-align: justify"; sur la div d'emballage autour vos balises <li> pour définir dynamiquement les espaces entre les entrées de menu.

J'espère que cela vous aidera.

Source

2017-10-01 20:30:19

Remplissez la page avec un menu horizontalement

Répondre

Questions connexes