目前我的导航栏大约有 50 像素高。我希望它在 150px 左右。我尝试通过在 CSS 文件中编写自己的代码来创建添加到 Bootstrap 的导航栏类，但是更改导航栏、导航或其他任何内容的高度似乎不会影响布局。如何更改导航栏高度？还有，字体颜色？
.navbar-inverse {
background-color: #337ab7;
border-color:#337ab7;
border-radius: 0px;
height:100px;
width:100%;
position: fixed;
}
.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus {
color: #fff;
background-color: #0e364c;
}
.navbar-inverse .navbar-nav>li>a {
color:#ffffff;font-family:
'Open Sans', sans-serif;
}
.navbar-inverse .navbar-brand {
color:#ffffff;
}
.menu {
display:none;
}
@media all and (max-width:768px){
/*login register*/
@import url(http://fonts.googleapis.com/css?family=Roboto);<head>
{% load static %}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.6.3/font-awesome.min.css"
<link type = "text/css" rel = "stylesheet" href= "{% static 'polls/stylesheet.css' %}" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<nav class="navbar navbar-inverse" id ="bar">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-flag" aria-hidden="true"></span> The Transparency Project</a>
</div><!--navbar-header close-->
<div class="collapse navbar-collapse drop_menu" id="content_details">
<ul class="nav navbar-nav">
<li><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li><a href="#"><span class="glyphicon glyphicon-search"></span> Opinions and Analysis</a></li>
<li><a href="#"><span class="glyphicon glyphicon-phone"></span> Contact</a></li>
</ul><!--nav navbar-nav close-->
<ul class="nav navbar-nav navbar-right">
<li><a href="#" data-toggle="modal" data-target="#signup-modal"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#" data-toggle="modal" data-target="#login-modal"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul><!--navbar-right close-->
</div><!--collapse navbar-collapse drop_menu close-->
</div><!--container-fluid close-->
</nav><!--navbar navbar-inverse close-->
<br>
<div class="container">
<div class="jumbotron">
<h1>sign up & login forms Tutorial</h1>
<p> click on login or sign up menu in header</p>
</div>
</div><!--container close-->最佳答案
首先您需要重新安排您的样式表。 Bootstrap 需要放在第一位，您的自定义 css 文件必须位于 Bootstrap 之后才能覆盖它。
正确的顺序是:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link type = "text/css" rel = "stylesheet" href= "{% static 'polls/stylesheet.css' %}" />
现在，为了覆盖导航栏的高度，在您的自定义样式表中更改 .navbar 类的最小高度
.navbar {
min-height: 150px;
}
对于颜色，您需要以下覆盖:
.navbar-inverse .navbar-nav > li > a {
color: red; /* here goes the color of your choice */
}
关于javascript - 如何覆盖 Bootstrap 类以增加导航栏高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41251801/