2017-02-03 4 views
1

4列のグリッドシステムを実現しようとしていますが、エクスプローラで正しくレンダリングできません。 (私は互換性のビューで動作する必要があります)エクスプローラv.11でブートストラップラップが壊れた

コードはクロムと下のスニペットで正常に動作します。 IEでこれを行うためのヒント?

Screenshot

.centercontainer{ 
 
\t margin: 0px auto; 
 
\t float: none; 
 
\t margin-top: 1%; 
 
\t border: 1px solid red; 
 
} 
 

 
.maincol{ 
 
\t border: 1px solid black; 
 
} 
 
\t
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 

 
\t <meta name="viewport" content="widt=device-width, initial-scale=1"> 
 
\t <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
\t <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
</head> 
 

 
<body> 
 

 
<div class="container centercontainer" style="width: 960px"> 
 
\t <div class="row"> 
 
\t \t <div class="col-xs-3 text-center">hej</div> 
 
\t \t <div class="col-xs-3 text-center">hej</div> 
 
\t \t <div class="col-xs-3 text-center">hej</div> 
 
\t \t <div class="col-xs-3 text-center">hej</div> 
 
\t </div> 
 
\t <div class="row"> 
 
\t \t <div class="col-xs-3 text-center">hej</div> 
 
\t \t <div class="col-xs-3 text-center">hej</div> 
 
\t \t <div class="col-xs-3 text-center">hej</div> 
 
\t \t <div class="col-xs-3 text-center">hej</div> 
 
\t </div> 
 
</div> 
 

 

 

 
</body> 
 

 
</html>

EDIT:画像記述

+0

どのバージョンのIEを使用していますか? – Uday

+0

私はInternet Explorerを使用しています11.576 –

+0

実際に上記のコードは私のために正常に動作します – Uday

答えて

0

だから、何でも私は、私は、互換表示を無効にせずにこの問題を解決することはできません。これは、グリッドを100%修正します。

関連する問題