CSS无法在CodePen中运行

时间:2017-04-12 02:17:56

标签: html css

这是一个简单的问题,我相信有人会在看到它的过程中迅速得到答案,但我的css不起作用,我不确定我做错了什么!任何帮助表示赞赏!

代码如下,但codepen的链接是http://codepen.io/benyaaalex/pen/BRBMeW?editors=1000

<head>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
  <style>
    body {
      background-color: blue;
    }
    .container-fluid {
      margin: 5%;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="container-fluid">
  </div>
</body>

3 个答案:

答案 0 :(得分:2)

你想要设计风格的div中没有​​内容,如果你添加一些文字并重新运行,你会发现它有效。

答案 1 :(得分:1)

工作正常。但是你的div不会获得任何背景颜色,边距等,直到它实际上有一些内容。空div在DOM中没有可见属性。

答案 2 :(得分:1)

  

我的CSS没有用,我不确定我做错了什么!

您的CSS不是问题。

  • div代码中没有内容,因此您无法看到任何更改。

  • 此外,您还需要html代码。

&#13;
&#13;
<html>
    <head>
      <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
      <style>
        body {
          background-color: blue;
        }
        .container-fluid {
          margin: 5%;
          background-color: red;
        }
      </style>
    </head>
    <body>
      <div class="container-fluid">
        What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </div>
    </body>
</html>
&#13;
&#13;
&#13;