如何覆盖Bootstrap的类以增加导航栏的高度？
[英]How do I override Bootstrap's class to increase the navbar height?
问题描述
Currently my navbar is about 50px high. 
目前，我的导航栏高约50像素。 I want it to be around 150px. 我希望它在150像素左右。 I tried creating adding onto Bootstrap's navbar class by writing my own in the CSS file, but changing the height of navbar, nav, or anything else doesn't seem to affect the layout. 我尝试通过在CSS文件中编写自己的脚本来在Bootstrap的navbar类上添加添加内容，但是更改navbar，nav或其他任何内容的高度似乎都不会影响布局。 How do I change the navbar height? 如何更改导航栏的高度？ also, the font color? 还有，字体颜色？
.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-->
4 个解决方案
解决方案1
3 2016-12-20 21:53:58
You can edit it the way that you have, you just have to make sure your css files are loaded after the bootstrap file. 您可以按照自己的方式进行编辑，只需要确保将CSS文件加载到引导文件之后即可。 Not before, which is what it looks like is happening. 不久之前，这正在发生。
This is based on the assumpation that this is your css file: 这是基于以下假设：这是您的CSS文件：
<link type = "text/css" rel = "stylesheet" href= "{% static 'polls/stylesheet.css' %}" />
If you swap these two it should override bootstraps settings: 如果将这两个交换掉，则它们应覆盖引导程序设置：
<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">
解决方案2
3 2016-12-20 22:22:40
First you need to rearrange your stylesheets. 首先，您需要重新排列样式表。 Bootstrap needs to be first and your custom css file must come after Bootstrap in order to override it. Bootstrap必须位于第一个位置，并且自定义css文件必须位于Bootstrap之后才能覆盖它。
Here is the correct order: 这是正确的顺序：
<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' %}" />
Now, in order to override the height of the navbar, in your custom stylesheet change the min-height of the .navbar class 现在，为了覆盖导航栏的高度，请在您的自定义样式表中更改.navbar类的最小高度。
.navbar {
min-height: 150px;
}
and for the color you need the following override: 对于颜色，您需要以下替代：
.navbar-inverse .navbar-nav > li > a {
color: red; /* here goes the color of your choice */
}
解决方案3
0 2016-12-20 22:03:26
If bootstrap overriding your CSS property then you have to specify !important to your defined CSS Properties like, 如果引导程序覆盖了您的CSS属性，则必须为定义的CSS属性指定！important ，例如，
.navbar{
height:150px !important;
}
解决方案4
0
For custom height you have to use !important in defining your height. 对于自定义高度，必须在定义高度时使用！important。
.navbar {
min-height: 150px !important;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.