メディアクエリーCodepenでの作業ではなく、テキストエディタ/クローム

-1

かかわらず、私は一つのことは別にブラケットテキストエディタを使用して（それがCodepenで行うようにブラケットを通じて同じことを実行します）、すべての作業偉大だ：メディアクエリーCodepenでの作業ではなく、テキストエディタ/クローム

私はCSSのメディアクエリを使用してブレークポイントを設定するので、最大幅537pxの列が1つしかありません。

@media (max-width: 537px) { 
.custom-column { 
    width: 100%; 
} 
} 


<div class="col-sm-4 col-xs-6 custom-column"> 
     <img src="#" alt="#" width="100%"> 
     <p>Me</p> 
     </div>

何らかの理由で、Codepenでは動作しますが、Chromeでテキストエディタを実行しても機能しません。それは私の '頭の'要素と多分関係がありますか？

<!DOCTYPE html="en"> 
<html lang> 
    <head> 

<meta charset="utf-8"> 

<title>Title</title> 


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

<link rel="stylesheet" type="text/css" href="main.css"> 

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<!-- Icons for footer --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css"> 

<!-- jQuery library --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

</head>

、ここcodepenです：[http://codepen.io/SimmoSim/pen/wJgpwg?editors=1100][1]

出典

2017-03-15 sim

私が表示されませんあなたが参照している537pxのブレークポイント... – hellojason

画像の幅が<537px –

、画面全体の幅になることを意味します。http://stackoverflow.com/questions/28213261/bootstrap- maxcdn-not-working＃28213627 –

私はこの問題を解決しました。私もMozzillaでこの問題を抱えていました。あなたのbootstrap cdnリンクを賞賛し、私のブートストラップリンクを使用して修正しました。

私はそれを理解しました。なぜなら、コードペンで作業していたので、スタイルシートのブートストラップcdnにロードされていない可能性があるからです。

これは私が使用していますブートストラップCDNで、私は私のヘッダータグに含める：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

    <link href="main.css" rel="stylesheet" /> 
    </head>

これは私の私の作業コードの残りの部分である：

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

     <link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet"> 
     <link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet"> 
     <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"> 
     <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 


     <link rel="stylesheet" type="text/css" href="magicstyle.css"> 

     </head>  
     <body> 
<!DOCTYPE html="en"> 
<html lang> 
    <head> 

<meta charset="utf-8"> 

<title>Title</title> 


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

<link rel="stylesheet" type="text/css" href="main.css"> 

<!-- Latest compiled and minified CSS --> 
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">--> 

<!-- Icons for footer --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css"> 

<!-- jQuery library --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

</head>  
</body> 

<nav class="navbar navbar-inverse navbar-static-top"> 
    <div class="navbar-header"> 
    <a class="navbar-brand" href="#">Simmo Simpson Web Design</a> 
     <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </a> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
      <li><a href="#home">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#portfolio">Portfolio</a></li> 
      <li><a href="#contact" >Contact</a></li> 
     </ul> 
    </div> 
</nav> 


<div id="about" class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-5 custom-about"> 
      <img src="http://res.cloudinary.com/simmosim/image/upload/v1488528687/Me_hkykum.jpg" class="img-circle" alt="My face" width="100%"> 
     </div> 

     <div class="col-xs-7 custom-about"> 
      <h1>Simmo Simpson</h1> 
      <h4>Freelance Web Design & Photography<br><br> 
       Feel free to take a look at my work</h4> 
      </div> 
    </div> 



<section class="container-fluid" id="portfolio"> 

    <h1>PORTFOLIO</h1> 
     <div> 
      <div class="col-sm-4 col-xs-6 custom-column"> 
      <img src="http://res.cloudinary.com/simmosim/image/upload/v1488528687/Me_hkykum.jpg" alt="My face" width="100%"> 
      <p>Me</p> 
      </div> 

      <div class="col-sm-4 col-xs-6 custom-column"> 
       <img src="http://res.cloudinary.com/simmosim/image/upload/v1488528687/Me_hkykum.jpg" alt="My face" width="100%"> 
      <p>Me</p> 
      </div> 

      <div class="col-sm-4 col-xs-6 custom-column"> 
        <img src="http://res.cloudinary.com/simmosim/image/upload/v1488528687/Me_hkykum.jpg" alt="My face" width="100%"> 
      <p>Me</p> 
      </div> 


      <div class="col-sm-4 col-xs-6 custom-column"> 
      <img src="http://res.cloudinary.com/simmosim/image/upload/v1488528687/Me_hkykum.jpg" alt="My face" width="100%"> 
      <p>Me</p> 
      </div> 

      <div class="col-sm-4 col-xs-6 custom-column"> 
       <img src="http://res.cloudinary.com/simmosim/image/upload/v1488528687/Me_hkykum.jpg" alt="My face" width="100%"> 
      <p>Me</p> 
      </div> 

      <div class="col-sm-4 col-xs-6 custom-column"> 
        <img src="http://res.cloudinary.com/simmosim/image/upload/v1488528687/Me_hkykum.jpg" alt="My face" width="100%"> 
      <p>Me</p> 
      </div> 
     </div> 
</section> 

</div>  

    <h1 id="contact">CONTACT ME</h1> 
     <div> 
      <P style="padding-left:5%" class="text-right">Need a website? Some quality photography?<br><br>Drop me a line on your prefered social media<br> platform by clicking a link below.<br><br> 
       Want some advice to become more productive?<br><br>Check out my blog by clicking the W icon.<br><br> 
      </P> 
     </div> 

<div class="footer-social-icons"> 
    <ul class="social-icons custom-social-icon"> 
     <li><a href="https://www.facebook.com/simmophotography" target="_blank" class="social-icon"> <i class="fa fa-facebook custom-social-icon"></i></a></li> 
     <li><a href="https://twitter.com/TweetSimmo" target="_blank" class="social-icon"> <i class="fa fa-twitter custom-social-icon"></i></a></li> 
     <li><a href="https://www.linkedin.com/in/simpsonuk/" target="_blank" class="social-icon"> <i class="fa fa-linkedin custom-social-icon"></i></a></li> 
     <li><a href="https://www.instagram.com/simmosimpson/" target="_blank" class="social-icon"> <i class="fa fa-instagram custom-social-icon"></i></a></li> 
     <li><a href="https://nomadapprentice.wordpress.com/" target="_blank" class="social-icon"> <i class="fa fa-wordpress custom-social-icon"></i></a></li> 
     <li><a href="https://github.com/simmosim" target="_blank" class="social-icon"> <i class="fa fa-github"></i></a></li> 
    </ul> 
    <br> 
</div> 

    <script 
     src="http://code.jquery.com/jquery-3.1.1.js" 
     integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" 
     crossorigin="anonymous"></script> 
    <script 
    src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
    <script src="script.js"></script>  

</body> 
</html>

出典

2017-03-15 08:17:42

ありがとう@Fabrizioこれは少し変更されました（私はスクリプト要素閉じたボディタグの直前まで。 – sim

@simこの問題はhttp://stackoverflow.com/questions/28213261/bootstrap-maxcdn-not-working#28213627の複製であるため、SOに質問を投稿しないでください –

メディアクエリーCodepenでの作業ではなく、テキストエディタ/クローム

答えて

関連する問題