2016-01-24 105 views
0

我有一個基本的網站,我建設學習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

+0

需要知道的main.css的內容有任何真正的辦法調試這個。你可以添加一個鏈接到一個codepen(http://codepen.io)幷包含你的樣式表? – ryantdecker

+0

我編輯它包括我的main.css,感謝您的快速響應! – DJBrandoK

+0

我可以假設你也關閉body標籤並加載bootstrap.js? :-)當我把你的代碼放入一個codepen時,它看起來像在FF中和Chrome一樣工作... http://codepen.io/anon/pen/GoQdMZ – ryantdecker

回答

1

嘗試加入這一行的代碼添加到您head部分:

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