bootstrap不与铬(火狐和即工作正常)
问题描述:
我有一个基本的网站,我建设学习Bootstrap。在Firefox和IE 11上,该网站按预期工作。网格系统工作,导航按预期折叠并切换汉堡包图标。bootstrap不与铬(火狐和即工作正常)
在chrome上,导航开始稍微低于992px,以覆盖正确的链接,并且不会折叠/切换汉堡包图标。
为什么它不适用于Chrome?
到目前为止,我有这个作为我的代码,预先感谢您:
<!doctype html>
<head>
<meta charset="utf-8">
<title>Testing Bootstrp</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class='navbar navbar-default navbar-fixed-top'>
<div class='container'>
<div class='navbar-header'>
<a href='#' class='navbar-brand'>
WELCOME TO MY WORLD
</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
</div>
<ul class='nav navbar-nav navbar-right collapse navbar-collapse'>
<li><a href="#">HOME</a></li>
<li><a href="#">Testimonails</a></li>
<li><a href="#">Insurance</a></li>
</ul>
</div>
</div>
这里是main.css的,没有太大的事情。
.features .glyphicon {
font-size: 32px;
color: purple;
}
body {
padding-top: 70px;
}
It starts to break here, the grid stops adapting under the 991 mark
答
尝试加入这一行的代码添加到您head
部分:
<meta name="viewport" content="width=device-width, initial-scale=1">
需要知道的main.css的内容有任何真正的办法调试这个。你可以添加一个链接到一个codepen(http://codepen.io)并包含你的样式表? – ryantdecker
我编辑它包括我的main.css,感谢您的快速响应! – DJBrandoK
我可以假设你也关闭body标签并加载bootstrap.js? :-)当我把你的代码放入一个codepen时,它看起来像在FF中和Chrome一样工作... http://codepen.io/anon/pen/GoQdMZ – ryantdecker