Question

我尝试使用bootstrap创建2个导航栏，它们都是屏幕上的。但不知怎的，我无法更改第二个导航栏的min-height或height。

我试图将min-height值更改为40px，但它不会影响任何内容。

我当前的HTML代码如下所示：

<?php
    require_once('handling/classes/site_config_class.php');
    $site_config = new site_config_class();
?>

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title><?php echo $site_config->site_title_home; ?></title>
     <!-- Stylesheet includes -->
     <link href="assets/css/bootstrap.min.css" rel="stylesheet">
     <link href="assets/css/stylesheet.css" rel="stylesheet">
     <!-- Core include -->
     <script src="handling/core/engine/babylon.2.4.core.js"></script>
     <!-- Core js include -->
     <script src="handling/core/js/initScene.js"></script>
</head>
<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>
                <a class="navbar-brand" href="#">
                    <div class="logo"></div>
                </a>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="navbar_active"><a href="#">DASHBOARD</a></li>
                    <li><a href="#">ENTER WORLD</a></li>
                    <li><a href="#">WARDROBE</a></li>
                    <li><a href="#">SHOPPING</a></li>
                    <li><a href="#">DESIGNER</a></li>
                    <li><a href="#">PURCHASE</a></li>
                </ul>

                <ul class="nav navbar-nav navbar-right">
                    <span class="glyphicon glyphicon-comment navbar_icons" aria-hidden="true"></span>
                    <span class="glyphicon glyphicon-bell navbar_icons" aria-hidden="true"></span>
                    <span class="glyphicon glyphicon-shopping-cart navbar_icons" aria-hidden="true"></span>
                    <span class="glyphicon glyphicon-fullscreen navbar_icons" aria-hidden="true"></span>
                    <span class="glyphicon glyphicon-log-out navbar_icons" aria-hidden="true"></span>
                </ul>
            </div>
        </div>
    </nav>
    <nav class="navbar navbar-default subnavbar">
        <div class="container-fluid">
            <ul class="nav navbar-nav">
                <li><a href="#">SHOPPING</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">SHOPPING</a></li>
            </ul>
        </div>
    </nav>
    <div class="col-md-12 no_padding">
        <canvas id="screen"></canvas>
    </div>

    <!-- Javascript includes -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
</body>
</html>

我的CSS代码如下：

body {
    margin: 0px;
    width: 100%;
    height: 100%;
    background-color: #f2f2f2;
}

.logo {
    width: 101px;
    height:25px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGUAAAAZCAYAAAAonOB1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA85pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wUmlnaHRzPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvcmlnaHRzLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcFJpZ2h0czpNYXJrZWQ9IkZhbHNlIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InV1aWQ6Q0NDNTU3RTk4QTcwRTMxMTgyMDA5RjhGNUM0NEY2OEYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkE5REE3NTU2RkIzMTFFNjlDMkJCQjQ2REEwQTZFNjciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkE5REE3NTQ2RkIzMTFFNjlDMkJCQjQ2REEwQTZFNjciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUuNSAoV2luZG93cykiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1ZGVjY2MzNC1hMmY3LTM0NDgtYTJkMC04OGJhMTZkZjJiNTYiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDo5NDRjZWIxMy02ZGZmLTExZTYtYjhlMi1hZDIzM2ZhOWZiNDYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5BZmuDAAAJEklEQVR42txaW0xURxg+i7DIVV3YBUq4tRbSCEFaG4QEg6I1msCDGI2NLybLg/GB+qLJEh+MkUSf5MmHbmKMsUTjJcEHYhU0NdEStUjANJAKAhG5CIgsgmhL/28zPx1m5+xBWyBlktlz2ZkzZ/7vv3z/zLHNzMwYcrHZbMYyK5lUU6k6qfqoDlF9SPXPIH0iqH4r+thFnz+oPl/olwUeocbyLgDkG+k6WtRYqj8HAaSEaox0zymqsRjABIDy5s2bZYFGbGyskwHp6OioTExMzJ+amho8d+5czdGjR3H7a5rrb5p+sJAYr9ebvWvXrsrQ0NCo7u7uxpycHC/d30h1lPqNLeS7hyyBsJKpbqW6T1Scr1qAofyafe/evVIAgvOVK1e69u/f75b/N+vHgOA8LS1ty82bN7fAuwfp9/8EBYDQYZMyMZwX0X8R//FwcFPG6tWrE+SbMTExGeLUoXk/9LFXVla6GBAukZGRfG1fdPdFL5ZNh0RJcAhyfTiS2Q59JAiYuI/6TQuh+zX20aNH+zIzM0txfvny5Wq3290mAusv1C6djmsV4DBuP9Vn9KxJk3cdEe16xXW0AMElv9OHDx8mxOm0cHEBmk+uyrWUrjdUYV6YZI7GnJ1CCDJIPgHUpALECom5RIt76NNBNfzq1av5DAi7CQKlAu2p3Xd0jDNxKaiZ1KaNxuygYzFdJ0ltHKJmBZuwDArVrbo2a9asiVLvvX37Vu63OKAQIPDr2X568fy5x+Fw+M9bWlpqcbxy5UpTTU3NoMJE3pFwANBDEhRTTFhDGk5OnTqVcffu3cH6+npcxuPHRWXOC5CbgLsQz45Dn507d5bAj3ObkZGRtsePHzeUl5c3IXgL5UhCv8OHD7vxruPj412nT5+uwR+7d+/Ov3//fhsF9C5yO3PGe//+/YTs3hBzggAwW3p7ewfFqW8xLQWCtiGgMSAoubm5+/h44sQJo7+/v2lgYKBzkIoQEny0nQTVQ0dMJm3Hjh1R58+fP4nAevDgQePBgwfe7du3N1q9DATE48kF77Nt27ZsYlFNZGU1zKrIwsr4XRErqqqqPBhTvK9RWFhYq8YGBgXgHzhwoJLbW5Xh4eFFsxQ50NuVgKYtYDIQHAmpknA5AwDoNgJ4AdUv0cbj8WyRJ1tQUOCGEMy0MBgg6tigt3ydkJCQLf+vCnjdunVlKihkUYOwsIqKCs98AUHp6+tbElD8Qby6uroR7mI+nTGpixcvnmltbXULcNLM2kIrRRttsQJEBkbQU0MVeIAbMPkfLs+qr1qEe0Ue51s0UCi9Byjd5P8n0tPTq8kdfY94Qpp5w2ri8P+UbHmsAKSJuSXfPFsOHTqkBQRJm+5+Xl5e2XxAgdtU771+/XpAds+SBXWhzoMcGItpKQDmPh1a4UI5uKempubrOqrWBJ8Oqmul5VQ2qvfj4+OzVSEcO3bsB2TRe/furUAmrgLM7lAnXCgTlOrJkydd87FIKF5ycnIVqk4JVVBA2zUJMJjhRqql4l451U26/Eu0Vfs7zSixU6wXhWPS8Ls6bcSkERsoVswRJqguWUxrMGBkVmXmZl69etUm3MUQmFt7e3uDKsz169dn6BQFVs7XcXFxUToBy+MJBajja5xfunSpVGFjrBQTEKiynqaujckxGrE2nvpgJWDMYhUBwNyGxwqRAEkXvN2fSxBrOqkD5NatWzVFRUU3wKbAxNT/y8rK3P/WfMHuOL7ih0AJ0HgdISHXyArRjp+UlBRXEK33l8nJSVD2CZF8GuJ8TpmenpYtxQ8I4ijFl59QQT4QL7FeBvKDe6QgP0KOkKcAaBYQEA304f4SLc8nHFaESoAUBGNBmMy1a9dqRPb9DoPRw71EfTNkFoPzrKyskmDaaVWIVX0uTl1myZxFmfoEXQhjqqxZpGVLiZQXOGW3TIyzU5Yb5guGSvKsBQuE9ct9VJdKgHYJ2SaGECBMZ/3o6wCBTz9+/HiV6OR/TyYFWHVVtU+lmnghnVWZaS9iDLSJM3Zyi+oqg4E8ySrp01mT5IpmYyE0nJfqS0pKAmIeWRMzLn9yy8IFEYErRyWrzGFZ4ZrjIOQJgNAHMuD7OCLuMbkgd8xzTID7SuH1KJ2/F4ylC1myMEf2gaC/w8ia79y54w2mgna7HVm7Vw3YXDo7OxvVGINEEFYLRVHfCyBGR0cHCNzn803IOVdERER0EBdnyEs9PJa8BKQDW45TR44cqYUrR+V7PT09TbhGHFSfc/369Tq+z57j5cuXfkVPSkri+OwMYV9nxrLUhBE+UGJZf8GVIbO3os5sVTq2dOHChQYdhcaYOkV5+vRpnc4KRkdH54ASHh4e0AZ5mGqZEJDZWArYcmZv0Lwz1LhD2u9SvQyfFxYWZmP5h8eE1ZG1dbLFijzOEcJJow5ZswJtEu4FgPrd0oYNG2rNeH5YWJhfOLAqNXcgsGrBtHiNzapgDFkzTZZCgiqHlWXrwIYAoZDYj2FXvGfPHg8Ha3gDVmAEew4Dzc3NdSwXWC5kwEoBkMh1zqYWxcXFLs5TnuEEE+WEUfaJZoUsY0JaCfCzHSwIWvSbAWtD7gFwMB7HKYxvBQwmR+2rdYwME8WEBUPycaKoy61g2fNVAjyX3PacseCK5cQWzyUaXYttCMyfYyqv+akuCjFWVhIwWrQV7z9sw0a9yE9ydTwacQQru2BEHOAwIaGtWLq/LczWv5QOjQKdVpMzWJIAz6HZK2nhZXTdKjHAoLjzq2Qh47B43pdRmOELqr/jeXAHZ8+erUQGL20Fd8nUFLESbBGCxHtSwtmKBBfjK8/95MIygYWJBVUDS0WaRVp8xVJvk79mEeCgxsr7IUHKbd74EvsooMJxAHLz5s1uZX8b5Rdq/0Js/zoFqGOiP67zTPZT5AJgB8QOZoAxUW3AHg89r9BkLQ6rFc1mSmhmpIJmy5tpDmUjsF/IS5bbkPBGcRrh28QRYSNCxMEhwmPMZvGJUYQ0yGfKS7RwPJLKKgFMuG4pypjflyC6nUd5V5HHBJX/SrSbNv75dEjedJN3JnWfF+H+F9Ic+VOitRbP/ZiyStr0w7N6hFLx9Ziy1GXYFuC7ryX7Zmo5FODxtwADAEmcDDJfqeMTAAAAAElFTkSuQmCC);
}

/* Navbar */

.navbar {
    min-height: 52px !important;
    line-height: 52px !important;
    background-color: #3d3d3d !important;
    border-radius: 0px !important;
    border: none !important;
    margin-bottom: 0px !important;
}

.navbar-brand {
    padding: 12px 15px !important;
}

.navbar-default .navbar-nav>li>a {
    font-family: "Segoe UI";
    font-size: 12px;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    color: #f2f2f2 !important;
}

.navbar-default .navbar-nav>li>a:hover {
    color: #a1a1a1 !important;
}

.navbar_icons {
    color: #a8a8a8 !important;
    margin-left: 10px;
    font-size: 14px;
}

.navbar_icons:hover {
    color: #fff !important;
    cursor: pointer;
}

/* Subnavbar */

.subnavbar {
    background-color: #fff !important;
    min-height: 40px !important;
}

/* Canvas */

#screen {
    width: 100%;
    height: 500px;
}

.no_padding {
    padding: 0px !important;
}

可在此处查看网站预览：Link to site

有谁知道如何将子弹子height设置为40px？

Answer 1

你可以尝试给它＆＃34;身高＆＃34;以及＆＃34; min-height＆＃34;

nav.subnavbar {
     background-color: #fff !important;
     height:40px;
     min-height: 40px !important;
  }

Answer 2

添加此css您的自定义CSS

.subnavbar .navbar-nav> li > a {
    padding-bottom: 10px;
    padding-top: 10px;
}

Answer 3

出现这种情况是因为你有一些 .subnavbar .navbar-nav＆gt;的样式。 li>一个您应该更改此元素的填充

无法更改子栏的高度

3 个答案: