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; 
}

996px

It starts to break here, the grid stops adapting under the 991 mark

来源

2016-01-24 DJBrandoK

需要知道的main.css的内容有任何真正的办法调试这个。你可以添加一个链接到一个codepen（http://codepen.io）并包含你的样式表？ – ryantdecker

我编辑它包括我的main.css，感谢您的快速响应！ – DJBrandoK

我可以假设你也关闭body标签并加载bootstrap.js？ :-)当我把你的代码放入一个codepen时，它看起来像在FF中和Chrome一样工作... http：//codepen.io/anon/pen/GoQdMZ – ryantdecker

尝试加入这一行的代码添加到您head部分：

<meta name="viewport" content="width=device-width, initial-scale=1">

来源

2017-02-02 20:47:31 Sagi

bootstrap不与铬（火狐和即工作正常）

回答

相关问题