[英]bootstrap navbar-fixed-top expanding height
I have a bootstrap 3.0 navbar-fixed-top that, for the life of me, I cannot figure out why its container is expanding to 60px height instead of the default 50px height. 我有一个bootstrap 3.0 navbar-fixed-top,对于我自己来说,我无法弄清楚为什么它的容器扩展到60px的高度,而不是默认的50px的高度。
My html 我的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>
The css rendered per chrome inspect element: 每个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;
}
This CSS file is causing conflicts with classes in your navbar form css_controls.cfm 此CSS文件导致与导航栏css_controls.cfm中的类冲突
form {
margin: 0;
}
input,
select,
textarea {
background-color: #ffffff;
padding: 2px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
outline: none;
border: 3px solid #999999;
color: #333333;
font-size: 12px;
margin: 0px 10px 10px 0;
}
After inspecting all of your navbar elements in FireBug, it seems that the form
element has its own margin-top
and margin-bottom
values defined by Bootstrap. 在检查了FireBug中的所有导航栏元素之后,似乎
form
元素具有由Bootstrap定义的自己的margin-top
和margin-bottom
值。
Therefore, removing, or somehow overriding those margin values in your own CSS should solve the problem. 因此, 在您自己的CSS中删除或以某种方式覆盖这些边距值应该可以解决该问题。
Also noticed that the submit button wasn't aligned with the rest of the form-group
elements on its left; 还注意到,提交按钮与左侧的其余
form-group
元素不对齐; to align it, add a float
to the button as well: 要对齐它,请在按钮上也添加一个
float
:
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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.