如何覆盖 Bootstrap 类以增加导航栏高度？答案

【问题标题】：How do I override Bootstrap's class to increase the navbar height?如何覆盖 Bootstrap 类以增加导航栏高度？
【发布时间】：2016-12-20 21:49:58
【问题描述】：

目前我的导航栏大约 50px 高。我希望它在 150 像素左右。我尝试通过在 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-->

【问题讨论】：

CSS 代表级联样式表。所以基本上样式表末尾的代码会覆盖前面的代码。所以我要做的是在你的样式表的末尾（假设它是在你的 boostrap 之后包含的）有你的类代码。如果它仍然令人讨厌，您可以使用!important;，但如果没有必要，我想尽量远离它们。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

首先，您需要重新排列样式表。 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 */
}

【讨论】：

【解决方案2】：

您可以按照自己的方式编辑它，您只需确保在引导文件之后加载您的 css 文件。不是以前，这就是它看起来正在发生的事情。

这是基于这是您的 css 文件的假设：

  <link type = "text/css" rel = "stylesheet" href= "{% static 'polls/stylesheet.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">

【讨论】：

【解决方案3】：

如果引导程序覆盖您的 CSS 属性，那么您必须为您定义的 CSS 属性指定 !important，例如，

.navbar{
   height:150px !important;
}

【讨论】：

【解决方案4】：

对于自定义高度，您必须使用 !important 来定义您的高度。

.navbar {
   min-height: 150px !important;
}

【讨论】：