Question

这是一个小问题，但我今天花了很多时间试图找出它而没有结果。

在下面的代码中（顺便说一下是课程作业），我创建了一个具有响应式设计和切换菜单的页面。在xs浏览器大小中，我的样式是完美的但是在sm，md和lg浏览器大小中，我无法将导航栏灯光颜色扩展到navbar-brand下的跨度，而不会移动所有内容并且完全难看。

提前感谢您的帮助。

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>

Answer 1

您可以将.navbar的最小高度设置为110px或您喜欢的。 jsfiddle

.navbar {
  min-height: 110px;
}

Navbar样式HTML和Bootstrap

1 个答案: