Navbar造型HTML和引导

这是一个小问题，但我花了所有今天试图找出没有结果。Navbar造型HTML和引导

在下面的代码中（顺便说一下是一个课程任务），我创建了一个具有响应式设计和切换菜单的页面。在xs浏览器大小我的造型是完美的，但在sm，md和lg浏览器大小，我无法扩展导航栏颜色的导航栏品牌下的跨度，没有一切都被转移，完全丑陋。

在此先感谢您的帮助。

<!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造型HTML和引导

回答

相关问题