如何覆蓋Bootstrap的類以增加導航欄的高度？
[英]How do I override Bootstrap's class to increase the navbar height?
問題描述
目前，我的導航欄高約50像素。 我希望它在150像素左右。 我嘗試通過在CSS文件中編寫自己的腳本來在Bootstrap的navbar類上添加添加內容，但是更改navbar，nav或其他任何內容的高度似乎都不會影響布局。 如何更改導航欄的高度？ 還有，字體顏色？
.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
您可以按照自己的方式進行編輯，只需要確保將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">
解決方案2
3 2016-12-20 22:22:40
首先，您需要重新排列樣式表。 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 */
}
解決方案3
0 2016-12-20 22:03:26
如果引導程序覆蓋了您的CSS屬性，則必須為定義的CSS屬性指定！important ，例如，
.navbar{
height:150px !important;
}
解決方案4
0
對於自定義高度，必須在定義高度時使用！important。
.navbar {
min-height: 150px !important;
}
如何僅使用 JavaScript 減少和增加滾動時的 div 高度？
[英]How do I decrease and increase height of div on scroll with JavaScript only?
如何使整個導航欄項在Bootstrap下拉菜單中都可單擊？
[英]How do I make the entire navbar item clickable for the Bootstrap dropdown?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.