相关疑难解决方法(0)

chrome上的Bootstrap navbar-form宽度问题

我正在使用bootstrap 3.0.0.

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

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

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

Chrome屏幕截图 Firefox截图

自定义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: …
Run Code Online (Sandbox Code Playgroud)

html css google-chrome twitter-bootstrap twitter-bootstrap-3

5
推荐指数
1
解决办法
7413
查看次数