Question

我正在尝试减少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;
  }
}

Answer 1

嗯，看着你的代码我在你的html中注意到你没有包含一个名为bootstrap的样式表？所以我假设两个css文件中的一个是bootstrap，并且标签common.css看起来就是这样。如果是这种情况，则反转css文件的顺序。在尝试覆盖任何css样式之前，您需要包含bootstrap.css（common.css？）文件。

.navbar {min-height:32px !important}

应该有用。

尝试添加自己的课程

.navClass { height:32px !important; min-height:32px !important; }

如果这些都不起作用，您可以随时访问引导程序网站并根据自己的喜好编辑CSS，只需更改导航栏样式即可。 http://getbootstrap.com/customize/#navbar＆lt; - 链接到导航栏样式只需更改该高度属性，然后下载该包。或者，如果你知道的更少，你可以自己更改较少的文件，并使用你想要的任何改变再次编译它们。

Answer 2

您需要调整几项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

-Ted

降低bootstrap中导航栏的高度3

2 个答案: