Я изменил свою навигационную панель min-height с 40 на 55, чтобы использовать логотип.
.navbar{
position:relative;
min-height:55px
}
Я хочу знать, как изменить высоту моих кнопок navbar:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Navigation ein-/ausblenden</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://holdirbootstrap.de/examples/navbar-fixed-top/#"> <img src="images/logoverysmall.png">Company</a>
</div
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="dev.htm">Home</a></li>
<li><a href="http://holdirbootstrap.de/examples/navbar-fixed-top/#ueber">Über uns</a></li>
<li><a href="http://holdirbootstrap.de/examples/navbar-fixed-top/#kontakt">Product</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">0<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</li>
<li><a href="/kontakt">Kontakt</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
1
20 Авг 2014 в 13:33
Нам нужно увидеть вашу разметку/код.
–
20 Авг 2014 в 13:57
Код добавлен для вас и других
–
20 Авг 2014 в 14:01
2 ответа
Лучший ответ
Вот полный рабочий код, если вы хотите изменить изменение высоты только в test1 или test2 css.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap 3 Static Navbar</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>
<style type="text/css">
.bs-example{
margin: 20px;
}
.test1
{
height:20px !important;
min-height:40px !important;
}
.test2
{
height:20px !important;
padding-top:10px !important;
min-height:20px !important;
}
</style>
</head>
<body>
<div class="bs-example">
<nav role="navigation" class="navbar navbar-inverse test1">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header test1">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand test2">Brand</a>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse test1">
<ul class="nav navbar-nav">
<li class="active test1"><a href="#" class="test2">Home</a></li>
<li class="test1"><a href="#" class="test2">Profile</a></li>
<li class="test1"><a href="#" class="test2">Messages</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#" class="test2">Login</a></li>
</ul>
</div>
</nav>
</div>
</body>
</html>
0
20 Авг 2014 в 16:53
Обычно в начальной загрузке уже установлена высота навигационной панели. Поэтому, если вы хотите изменить высоту, используйте приведенный ниже код
.navbar
{
position:relative;
height:55px !important;
}
Если вы пишете стиль для конкретной навигационной панели, добавьте '! Important' ко всем элементам, потому что во время выполнения это займет только время выполнения css. Так что используйте слово "! Important".
0
20 Авг 2014 в 15:40
Не работало. Я не хочу большую панель навигации, я просто хочу сделать серые кнопки немного больше.
–
20 Авг 2014 в 15:57
Могу ли я иметь рабочий код или скрипку, чтобы дать лучшее решение
–
20 Авг 2014 в 16:22