在 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:

See this bootply

假设高度为 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

-泰德