Navbar Styling HTML und Bootstrap

Dies ist ein kleines Problem, aber ich verbrachte alles heute versuchen, es ohne Ergebnis herauszufinden.Navbar Styling HTML und Bootstrap

Im folgenden Code (der übrigens eine Kurszuweisung ist) habe ich eine Seite mit Responsive Design und einem Toggle-Menü erstellt. in xs browsergröße ist mein styling perfekt, aber in sm, md und lg browsergrößen konnte ich die navbar-hellfarbe nicht auf die spanne unter navbar-brand erweitern, ohne dass alles verschoben und total hässlich ist.

Vielen Dank im Voraus für Ihre Hilfe.

https://jsfiddle.net/9vnh6rga/

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="Viewport" content="width=device-width, initial-scale= 1"> 
    <title>House Of Burger - Acceuil</title> 
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
    <link rel="stylesheet" href="css/styles.css"> 
    <link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Ultra" rel="stylesheet"> 

</head> 
<body> 
    <header> 
     <nav id="header-nav" class="navbar navbar-default"> 
      <div class="container"> 
       <div class="navbar-header"> 
<!-- 
        <a href="index.html" class="pull-left visible-sm visible-md visible-lg"> 
         <div id="logo-img" alt="logo image"></div> 
        </a> 
--> 
        <div class="navbar-brand"> 
         <a href="index.html"><h1>House of Burger</h1></a> 
         <span>Freshly Homemade</span> 
        </div> 

        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
       </div> 

       <div id="collapsable-nav" class="collapse navbar-collapse"> 
        <ul id="nav-list" class="nav navbar-nav navbar-right visible-xs"> 
         <li> 
          <a href="couscous.html">Couscous</a> 
         </li> 
         <li> 
          <a href="doubara.html">Doubara</a> 
         </li> 
         <li> 
          <a href="zviti.html">Zviti</a> 
         </li>      
        </ul> <!-- ul closing -->     
       </div> <!-- #collapsable-nav --> 
      </div> <!-- .container --> 
     </nav> <!-- #header-nav --> 
     </header> 
    <script src="js/jquery-3.1.1.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <script src="js/script.js"></script> 
</body>  
</html>

Quelle

2016-12-24 Hacene .N

Sie können min-height von .navbar zu 110px oder nach Ihren Wünschen einstellen. jsfiddle

.navbar { 
    min-height: 110px; 
}

Quelle

2016-12-24 22:48:25

es hat super funktioniert. –

Navbar Styling HTML und Bootstrap

Antwort

Verwandte Themen