-1

我正在使用 Brackets 文本编辑器，除了一件事之外，一切都运行良好（通过 Brackets 运行与使用 Codepen 相同）：

我正在使用 CSS 媒体查询来设置断点，所以我在最大宽度 537 像素处只有一列。

@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]

4

1 回答 1

1

我解决了这个问题。我在 Mozzilla 上也遇到了这个问题，我通过推荐您的引导 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-15T08:17:42.520 回答