bootstrap navbar-fixed-top扩展高度

时间:2016-01-05 06:17:44

标签: jquery html css twitter-bootstrap

我有一个bootstrap 3.0 navbar-fixed-top,在我的生命中,我无法弄清楚为什么它的容器扩展到60px高度而不是默认的50px高度。

我的HTML

<div class="navbar navbar-default navbar-account navbar-fixed-top" role="navigation" id="nav1">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#first">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand visible-lg visible-md hidden-sm hidden-xs" href="#"><img src="/images/small_logo.png" alt="" height="24" style="margin-right: 6px;" class="img-responsivex">p</a>
          <a class="navbar-brand hidden-lg hidden-md visible-sm visible-xs" href="#"><img src="/images/small_logo.png" alt="" height="24" style="margin-right: 6px;" class="img-responsivex">Account Login</a>
        </div><!--/.navbar-header -->
        <div id="first" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">

              <li><a href="/account_create.cfm">Create Coach Account</a></li>
            </ul>    



<form action="/coach/index.cfm?" method="post" class="navbar-form navbar-right" role="form" id="accountlogin" novalidate="novalidate">            <div class="form-group">
              <input type="text" placeholder="Username" class="form-control" name="username" id="username">
            </div>
            <div class="form-group">
              <input type="password" placeholder="Password" class="form-control" name="password" id="password">
            </div>
            <button type="submit" class="btn btn-success" name="loginuser">Sign in</button>
</form>


        </div><!--/.navbar-collapse -->
      </div>
    </div>

每个chrome检查元素呈现的css:

.navbar-static-top, .navbar-fixed-top, .navbar-fixed-bottom {
    border-radius: 0;
}
.navbar-default {
    background-image: -webkit-linear-gradient(top, #ffffff 0%, #f8f8f8 100%);
    background-image: -o-linear-gradient(top, #ffffff 0%, #f8f8f8 100%);
    background-image: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075);
}
.navbar-default {
    background-color: #f8f8f8;
    border-color: #e7e7e7;
}
.navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
}
@media (min-width: 768px)
.navbar-fixed-top, .navbar-fixed-bottom {
    border-radius: 0;
}
.navbar-fixed-top, .navbar-fixed-bottom {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
@media (min-width: 768px)
.navbar {
    border-radius: 4px;
}
.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
user agent stylesheetdiv {
    display: block;
}
Inherited from body
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.428571429;
    color: #222222;
    background-color: #ffffff;
}
Inherited from html.js.flexbox.canvas.canvastext.webgl.no-touch.geolocation.postmessage.websqldatabase.indexeddb.hashchange.history.draganddrop.websockets.rgba.hsla.multiplebgs.backgroundsize.borderimage.borderradius.boxshadow.textshadow.opacity.cssanimations.csscolumns.cssgradients.cssreflections.csstransforms.csstransforms3d.csstransitions.fontface.generatedcontent.video.audio.localstorage.sessionstorage.webworkers.applicationcache.svg.inlinesvg.smil.svgclippaths
html {
    font-size: 10px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
Pseudo ::before element
.clearfix:before, .clearfix:after, .dl-horizontal dd:before, .dl-horizontal dd:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after, .form-horizontal .form-group:before, .form-horizontal .form-group:after, .btn-toolbar:before, .btn-toolbar:after, .btn-group-vertical > .btn-group:before, .btn-group-vertical > .btn-group:after, .nav:before, .nav:after, .navbar:before, .navbar:after, .navbar-header:before, .navbar-header:after, .navbar-collapse:before, .navbar-collapse:after, .pager:before, .pager:after, .panel-body:before, .panel-body:after, .modal-footer:before, .modal-footer:after {
    content: " ";
    display: table;
}
*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
Pseudo ::after element
.clearfix:after, .dl-horizontal dd:after, .container:after, .container-fluid:after, .row:after, .form-horizontal .form-group:after, .btn-toolbar:after, .btn-group-vertical > .btn-group:after, .nav:after, .navbar:after, .navbar-header:after, .navbar-collapse:after, .pager:after, .panel-body:after, .modal-footer:after {
    clear: both;
}
.clearfix:before, .clearfix:after, .dl-horizontal dd:before, .dl-horizontal dd:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after, .form-horizontal .form-group:before, .form-horizontal .form-group:after, .btn-toolbar:before, .btn-toolbar:after, .btn-group-vertical > .btn-group:before, .btn-group-vertical > .btn-group:after, .nav:before, .nav:after, .navbar:before, .navbar:after, .navbar-header:before, .navbar-header:after, .navbar-collapse:before, .navbar-collapse:after, .pager:before, .pager:after, .panel-body:before, .panel-body:after, .modal-footer:before, .modal-footer:after {
    content: " ";
    display: table;
}
*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

2 个答案:

答案 0 :(得分:1)

此CSS文件导致与导航栏格式css_controls.cfm

中的类冲突
D1234

答案 1 :(得分:0)

在检查FireBug中的所有导航栏元素后,似乎form元素有自己的margin-topmargin-bottom值由Bootstrap定义。

因此,删除或以某种方式覆盖您自己的CSS 中的那些边距值应该可以解决问题。

还注意到提交按钮未与其左侧的其余form-group元素对齐;要对齐它,也可以在按钮上添加float

CSS

form#accountLogin {
    margin-bottom: 0; // in case, this doesn't remove the margin-bottom, add `!important` after the value.
}
form#accountlogin button[type="submit"]{ 
    float: right;
}