Navbar styling HTML и Bootstrap

Это второстепенная проблема, но я потратил весь сегодня, пытаясь понять это безрезультатно.Navbar styling HTML и Bootstrap

В приведенном ниже коде (который, кстати, является назначением курса), я создал страницу с отзывчивым дизайном и меню переключения. в размере браузера xs мой стиль идеален, но в размерах браузера sm, md и lg я не мог расширить цвет фона навигатора до диапазона под брендом navbar, не перекладывая и не уступая всем.

Заранее за вашу помощь.

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>

источник

2016-12-24 Hacene .N

Вы можете установить мин-высоту .navbar на 110px или по своему вкусу. jsfiddle

.navbar { 
    min-height: 110px; 
}

источник

2016-12-24 22:48:25

он отлично поработал. –

Navbar styling HTML и Bootstrap

ответ

Смежные вопросы