html – chrome上的Bootstrap导航栏形式宽度问题

我正在使用bootstrap 3.0.0.

在使用Default Navbar示例时,使用一些自定义CSS,我发现搜索表单文本框在chrome上占据了全宽,因此我的导航栏分为三行.它在Firefox和IE上运行良好.

问题是,在firefox中计算的宽度是236px,但在chrome中,它是1110px. firefox&最后附上了chrome截图.在屏幕截图和JSFiddle之后给出代码,但在那里看不到输出.它仅供参考.

它是chrome中的已知错误还是更多可能是我做错了.如果是,有人可以弄清楚我做了什么错误？

自定义CSS

@import url(http://fonts.googleapis.com/css?family=Spirax|Oleo+Script+Swash+Caps&text=FlipKhan);
body{background: url("../images/bg.gif") scroll center top #C0C0C0;}
.navbar-top {margin-bottom: 0; min-height: 35px; height:50px;}
.navbar-top div.container{height:45px;}
.navbar-top div.container div.navbar-header{height:45px;}
.navbar-top a.navbar-brand {padding: 10px;}
.navbar-top div.container div.collapse{height:45px;}
.navbar-top .navbar-brand {font-family: 'Oleo Script Swash Caps',cursive; font-size: 35px; color: #FFF;}
.navbar-inverse {
  background: none !important; 
  border: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}
.navbar-inverse .nav .active > a {
  background: 0 !important; 
  color: #333 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}
.navbar-inverse .nav > li > a {
  color: #333 !important;
  text-shadow: none !important;
}
.navbar-inverse .nav > li > a:hover {
  color: #333 !important;
}

HTML(仅适用于导航栏)