在 bootstrap 3 中降低导航栏的高度
reduce height of navbar in bootstrap 3
我正在尝试减小 bootstrap 中导航栏的大小。我在这上面花了很多时间,并尝试在我的 css 文件中做以下事情:
.navbar-nav > li > a {padding-top:5px !important; padding-bottom:5px !important;}
.navbar {min-height:32px !important}
还有:
.tnav .navbar .container { height: 28px; }
这些更改没有任何区别:(
我已经添加了我的 html 和当前的 CSS 文件,如果能得到任何帮助,我将不胜感激。
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/css/app.css" rel="stylesheet">
<link href="/css/common.css" rel="stylesheet">
<!-- Fonts -->
<link href='//fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="row">
<div class="col-md-4">
{!! Form::image('img/logo.gif', 'logo',
array( 'class' => 'img-responsive' ))
!!}
</div>
<div class="col-md-4 col-md-offset-4">
{!! Form::image('img/social_links.gif', 'logo',
array( 'class' => 'img-responsive' ))
!!}
</div>
</div>
</div>
</div>
<div class="row">
<nav class="navbar navbar-default">
<div class="col-md-6 col-md-offset-3">
<div class="container-fluid">
</div>
</div>
</nav>
</div>
<div class="row">
<div id="carousel-fuudey" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-fuudey" data-slide-to="0" calss="active"></li>
<li data-target="#carousel-fuudey" data-slide-to="1"></li>
<li data-target="#carousel-fuudey" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/banner.gif" alt="banner" />
</div>
<div class="item">
<img src="img/banner.gif" alt="banner" />
</div>
<div class="item">
<img src="img/banner.gif" alt="banner" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="row">
<div class="col-md-4">
<p>login</p>
</div>
<div class="col-md-4">
<p>menu</p>
</div>
<div class="col-md-4">
<p>contact</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
{!! Form::image('img/gal-pic.gif', 'gallery',
array( 'class' => 'img-responsive' ))
!!}
</div>
</div>
<div class="row">
<div class="col-md-4">
{!! Form::image('img/left.gif', 'gallery',
array( 'class' => 'img-responsive' ))
!!}
</div>
<div class="col-md-4">
{!! Form::image('img/middle.gif', 'gallery',
array( 'class' => 'img-responsive' ))
!!}
</div>
<div class="col-md-4">
{!! Form::image('img/right.gif', 'gallery',
array( 'class' => 'img-responsive' ))
!!}
</div>
</div>
</div>
</div>
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">
</div>
<div class="panel-body">
</div>
</div>
</div>
</div>
<!-- Scripts -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
css:
.navbar-default {
background-color: #4f0100;
border-color: #4f0100;
}
.navbar-default .navbar-brand {
color: #ecf0f1;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
color: #ecdbff;
}
.navbar-default .navbar-text {
color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a {
color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #ecdbff;
}
.navbar-default .navbar-nav > li > .dropdown-menu {
background-color: #4f0100;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
color: #ecf0f1;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover, .navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
color: #ecdbff;
background-color: #4f0100;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > .divider {
background-color: #4f0100;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #ecdbff;
background-color: #4f0100;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
color: #ecdbff;
background-color: #4f0100;
}
.navbar-default .navbar-toggle {
border-color: #4f0100;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #4f0100;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ecf0f1;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
border-color: #ecf0f1;
}
.navbar-default .navbar-link {
color: #ecf0f1;
}
.navbar-default .navbar-link:hover {
color: #ecdbff;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #ecf0f1;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ecdbff;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ecdbff;
background-color: #4f0100;
}
}
嗯,看你的代码我注意到你的 html 你没有包含一个名为 bootstrap 的样式表?所以我假设两个 css 文件之一是 bootstrap 并且通过标签 common.css 看起来就是它。如果是这种情况,请颠倒 css 文件的顺序。在尝试覆盖任何 css 样式之前,您需要包含 bootstrap.css (common.css?) 文件。
.navbar {min-height:32px !important}
应该可以。
尝试添加您自己的 class
.navClass { height:32px !important; min-height:32px !important; }
如果 none 有效,您可以随时访问 bootstrap 网站并根据自己的喜好编辑 css 并更改导航栏样式。 http://getbootstrap.com/customize/#navbar <-- link 导航栏样式只需更改高度 属性 然后下载包。或者,如果你了解得更少,你可以自己更改 less 文件,然后根据需要进行任何更改再次编译它们。
您需要调整几项 CSS:
假设高度为 32px,添加这些覆盖:
.navbar{
min-height:32px;
}
.navbar-brand{
height:32px;
padding:5px 15px;
}
.navbar-nav>li>a {
padding-top: 6px;
padding-bottom: 6px;
}
只需确保将它们添加到默认 bootstrap css 文件后
HTH
-泰德
我正在尝试减小 bootstrap 中导航栏的大小。我在这上面花了很多时间,并尝试在我的 css 文件中做以下事情:
.navbar-nav > li > a {padding-top:5px !important; padding-bottom:5px !important;}
.navbar {min-height:32px !important}
还有:
.tnav .navbar .container { height: 28px; }
这些更改没有任何区别:(
我已经添加了我的 html 和当前的 CSS 文件,如果能得到任何帮助,我将不胜感激。
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/css/app.css" rel="stylesheet">
<link href="/css/common.css" rel="stylesheet">
<!-- Fonts -->
<link href='//fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="row">
<div class="col-md-4">
{!! Form::image('img/logo.gif', 'logo',
array( 'class' => 'img-responsive' ))
!!}
</div>
<div class="col-md-4 col-md-offset-4">
{!! Form::image('img/social_links.gif', 'logo',
array( 'class' => 'img-responsive' ))
!!}
</div>
</div>
</div>
</div>
<div class="row">
<nav class="navbar navbar-default">
<div class="col-md-6 col-md-offset-3">
<div class="container-fluid">
</div>
</div>
</nav>
</div>
<div class="row">
<div id="carousel-fuudey" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-fuudey" data-slide-to="0" calss="active"></li>
<li data-target="#carousel-fuudey" data-slide-to="1"></li>
<li data-target="#carousel-fuudey" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/banner.gif" alt="banner" />
</div>
<div class="item">
<img src="img/banner.gif" alt="banner" />
</div>
<div class="item">
<img src="img/banner.gif" alt="banner" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="row">
<div class="col-md-4">
<p>login</p>
</div>
<div class="col-md-4">
<p>menu</p>
</div>
<div class="col-md-4">
<p>contact</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
{!! Form::image('img/gal-pic.gif', 'gallery',
array( 'class' => 'img-responsive' ))
!!}
</div>
</div>
<div class="row">
<div class="col-md-4">
{!! Form::image('img/left.gif', 'gallery',
array( 'class' => 'img-responsive' ))
!!}
</div>
<div class="col-md-4">
{!! Form::image('img/middle.gif', 'gallery',
array( 'class' => 'img-responsive' ))
!!}
</div>
<div class="col-md-4">
{!! Form::image('img/right.gif', 'gallery',
array( 'class' => 'img-responsive' ))
!!}
</div>
</div>
</div>
</div>
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">
</div>
<div class="panel-body">
</div>
</div>
</div>
</div>
<!-- Scripts -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
css:
.navbar-default {
background-color: #4f0100;
border-color: #4f0100;
}
.navbar-default .navbar-brand {
color: #ecf0f1;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
color: #ecdbff;
}
.navbar-default .navbar-text {
color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a {
color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #ecdbff;
}
.navbar-default .navbar-nav > li > .dropdown-menu {
background-color: #4f0100;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
color: #ecf0f1;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover, .navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
color: #ecdbff;
background-color: #4f0100;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > .divider {
background-color: #4f0100;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #ecdbff;
background-color: #4f0100;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
color: #ecdbff;
background-color: #4f0100;
}
.navbar-default .navbar-toggle {
border-color: #4f0100;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #4f0100;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ecf0f1;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
border-color: #ecf0f1;
}
.navbar-default .navbar-link {
color: #ecf0f1;
}
.navbar-default .navbar-link:hover {
color: #ecdbff;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #ecf0f1;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ecdbff;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ecdbff;
background-color: #4f0100;
}
}
嗯,看你的代码我注意到你的 html 你没有包含一个名为 bootstrap 的样式表?所以我假设两个 css 文件之一是 bootstrap 并且通过标签 common.css 看起来就是它。如果是这种情况,请颠倒 css 文件的顺序。在尝试覆盖任何 css 样式之前,您需要包含 bootstrap.css (common.css?) 文件。
.navbar {min-height:32px !important}
应该可以。
尝试添加您自己的 class
.navClass { height:32px !important; min-height:32px !important; }
如果 none 有效,您可以随时访问 bootstrap 网站并根据自己的喜好编辑 css 并更改导航栏样式。 http://getbootstrap.com/customize/#navbar <-- link 导航栏样式只需更改高度 属性 然后下载包。或者,如果你了解得更少,你可以自己更改 less 文件,然后根据需要进行任何更改再次编译它们。
您需要调整几项 CSS:
假设高度为 32px,添加这些覆盖:
.navbar{
min-height:32px;
}
.navbar-brand{
height:32px;
padding:5px 15px;
}
.navbar-nav>li>a {
padding-top: 6px;
padding-bottom: 6px;
}
只需确保将它们添加到默认 bootstrap css 文件后
HTH
-泰德