2017-04-12 84 views
0

這是一個簡單的問題,我敢肯定有人會在看到它的時候很快得到答案,但我的CSS不工作,我不知道我做錯了什麼!任何幫助感謝!CSS不能在CodePen中工作

的代碼如下,但鏈接到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> 
+0

什麼是不工作?如果您指的是沒有背景色的「容器流體」,那是因爲它裏面沒有內容。 – GvM

+0

您正在設計的內容中沒有內容。如果您將文本添加到'container-fluid'' div'中,您將得到一個結果 –

+0

噢好吧,學習時刻:)謝謝! – abenya

回答

2

有您要的風格DIV裏面沒有內容,如果你添加一些文字,然後重新運行你會看到它的工作原理。

1

它工作正常。但是你不會爲你的div獲得任何背景顏色,邊距等,直到它實際上包含了一些內容。一個空的div在DOM中沒有可見的屬性。

1

我的CSS不工作,我不知道我做錯了什麼!

您的CSS不是問題。

  • div標籤內沒有內容,因此您將無法看到任何更改。

  • 此外,您將需要html標籤。


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