2016-12-20 3 views
1

В настоящее время мой навигатор имеет высоту около 50px. Я хочу, чтобы это было около 150 пикселей. Я попытался создать добавление в класс навигатора Bootstrap, написав свой собственный файл CSS, но изменение высоты navbar, nav или всего остального не влияет на макет. Как изменить высоту навигатора? также, цвет шрифта?Как переопределить класс Bootstrap, чтобы увеличить высоту навигатора?

.navbar-inverse { 
 
\t background-color: #337ab7; 
 
\t border-color:#337ab7; 
 
\t border-radius: 0px; 
 
\t height:100px; 
 
\t width:100%; 
 
\t position: fixed; 
 
} 
 

 
.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { 
 
\t color: #fff; 
 
\t background-color: #0e364c; 
 
} 
 

 
.navbar-inverse .navbar-nav>li>a { 
 
\t color:#ffffff;font-family: 
 
\t 'Open Sans', sans-serif; 
 
} 
 
.navbar-inverse .navbar-brand { 
 
\t color:#ffffff; 
 
} 
 
.menu { 
 
\t 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-->

+0

CSS - это каскадные таблицы стилей. Таким образом, в основном код в конце таблицы стилей отменяет предыдущий код. Так что я бы сделал это в конце вашей таблицы стилей (учитывая, что он был включен после вашего boostrap) есть свой код класса. Если это все еще надоедливо, вы можете использовать '! Important; ', но мне нравится стараться держаться подальше от них, если они не нужны. – oompahlumpa

ответ

3

Вы можете изменить его так, что у вас есть, вы просто должны убедиться, что ваши файлы CSS будут загружены после начальной загрузки файла. Не раньше, как это выглядит, происходит.

Это основано на assumpation, что это ваш файл 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"> 
0

Если самозагрузки подменяют свойство CSS, то вам необходимо указать ! important вашим определенным CSS-свойствам, например

.navbar{ 
    height:150px !important; 
} 
3

Сначала вам нужно изменить порядок стилей. 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 */ 
} 
0

Для пользовательской высоты вы должны использовать Важно определить ваш рост.

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