我正在解决freeCodeCamp上的一些挑战。具体而言，挑战在于对您选择的主题做一个简短的“致敬页面”。我一直在使用CodePen，但已经开始使用Brackets，因为它看起来更加用户友好。
我的问题是我的CSS样式在我的独立html文件中没有做任何事情，而在CodePen中它正在工作。我确定我在某个地方犯了一个愚蠢的错误。 思考？感谢您的任何建议/帮助！
代码：
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron" style="margin-top:20px" >
<h1 style="color: black" class="text-center">Gord Downie</h1>
<div class="row center">
<img src="http://i.huffpost.com/gen/4541188/thumbs/o-GORD-DOWNIE-TRAGICALLY-HIP-570.jpg?5" class="center">
</div>
<p class="caption text-center"> "He Who Walks Among The Stars" </p>
<p class="text-center"> Gord Downie is a Canadian musician, most well known for his role as the lead singer of the Tragically Hip. More recently in his career, he has also been a spokesperson for the welfare of First Nations communities across Canada. Since 2016, Gord has been battling incurable brain cancer, but has been able to continue writing and performing. As a true artist, Gord has never let fame change him, always maintaining his focus on his music and philanthropy.</p>
<div class="text-center">
<h3 class="text-center"> <strong>Musical Works </strong></h3>
<h5>As a member of the Tragically Hip:</h5>
<ul class="text-center">
<li>The Tragically Hip (Self-Titled) - <em>1987</em></li>
<li>Up To Here - <em>1989</em></li>
<li>Road Apples - <em>1991</em></li>
<li>Fully Completely - <em>1992</em></li>
<li>Day for Night - <em>1994</em></li>
<li>Trouble at the Henhouse - <em>1996</em></li>
<li>Phantom Power - <em>1998</em></li>
<li>Music @ Work - <em>2000</em></li>
<li>In Violet Light - <em>2002</em></li>
<li>In Between Evolution - <em>2004</em></li>
<li>World Container - <em>2006</em></li>
<li>We Are the Same - <em>2009</em></li>
<li>Now for Plan A - <em>2012</em></li>
</ul>
<h5>Solo Work</h5>
<ul>
<li>Coke Machine Glow - <em>2001</em></li>
<li>Battle of the Nudes - <em>2003</em></li>
<li>The Grand Bounce - <em>2010</em></li>
<li>Secret Path - <em>2016</em></li>
</ul>
</div>
</body>
</html>
答案 0 :(得分：1)
看起来您正在使用引导类，因此您需要将引导样式表添加到您的页面。您可以使用我在HTML中添加的CDN链接，也可以下载文件并将其上传到您的网站/项目https://getbootstrap.com/。
Bootstrap可能已经出现在您的codepen项目中，但是bootstrap不是HTML或CSS的基本组成部分，因此如果您想在自定义项目中使用它，则必须包含它。您还希望在自己的任何样式之前包含引导样式表，以便应用基本引导程序样式，然后如果需要，您可以使用之后加载的样式覆盖特定样式，并且bootstrap不会干扰。
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
.center {
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron" style="margin-top:20px" >
<h1 style="color: black" class="text-center">Gord Downie</h1>
<div class="row center">
<img src="http://i.huffpost.com/gen/4541188/thumbs/o-GORD-DOWNIE-TRAGICALLY-HIP-570.jpg?5" class="center">
</div>
<p class="caption text-center"> "He Who Walks Among The Stars" </p>
<p class="text-center"> Gord Downie is a Canadian musician, most well known for his role as the lead singer of the Tragically Hip. More recently in his career, he has also been a spokesperson for the welfare of First Nations communities across Canada. Since 2016, Gord has been battling incurable brain cancer, but has been able to continue writing and performing. As a true artist, Gord has never let fame change him, always maintaining his focus on his music and philanthropy.</p>
<div class="text-center">
<h3 class="text-center"> <strong>Musical Works </strong></h3>
<h5>As a member of the Tragically Hip:</h5>
<ul class="text-center">
<li>The Tragically Hip (Self-Titled) - <em>1987</em></li>
<li>Up To Here - <em>1989</em></li>
<li>Road Apples - <em>1991</em></li>
<li>Fully Completely - <em>1992</em></li>
<li>Day for Night - <em>1994</em></li>
<li>Trouble at the Henhouse - <em>1996</em></li>
<li>Phantom Power - <em>1998</em></li>
<li>Music @ Work - <em>2000</em></li>
<li>In Violet Light - <em>2002</em></li>
<li>In Between Evolution - <em>2004</em></li>
<li>World Container - <em>2006</em></li>
<li>We Are the Same - <em>2009</em></li>
<li>Now for Plan A - <em>2012</em></li>
</ul>
<h5>Solo Work</h5>
<ul>
<li>Coke Machine Glow - <em>2001</em></li>
<li>Battle of the Nudes - <em>2003</em></li>
<li>The Grand Bounce - <em>2010</em></li>
<li>Secret Path - <em>2016</em></li>
</ul>
</div>
</body>
</html>
答案 1 :(得分：0)
这听起来有点明显，但是：
请检查您是否已包含CSS文件：
bootstrap CDN的示例：
<!DOCTYPE html>
<html>
<head>
<!-- load bootstrap from CDN !-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
Content
</body>
</html>
其次为什么要使用<style>标签？你也可以把它包含在另一个文件中。
答案 2 :(得分：0)
您需要向您添加Bootstrap CDN链接才能使自定义类正常工作
<!DOCTYPE html>
<html>
<head>
<link hef="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
.center {margin: auto; }
</style>
</head>
<body>
<div class="container">
<div class="jumbotron" style="margin-top:20px" >
<h1 style="color: black" class="text-center">Gord Downie</h1>
<div class="row center">
<img src="http://i.huffpost.com/gen/4541188/thumbs/o-GORD-DOWNIE-TRAGICALLY-HIP-570.jpg?5" class="center">
</div>
<p class="caption text-center"> "He Who Walks Among The Stars" </p>
<p class="text-center"> Gord Downie is a Canadian musician, most well known for his role as the lead singer of the Tragically Hip. More recently in his career, he has also been a spokesperson for the welfare of First Nations communities across Canada. Since 2016, Gord has been battling incurable brain cancer, but has been able to continue writing and performing. As a true artist, Gord has never let fame change him, always maintaining his focus on his music and philanthropy.</p>
<div class="text-center">
<h3 class="text-center"> <strong>Musical Works </strong></h3>
<h5>As a member of the Tragically Hip:</h5>
<ul class="text-center">
<li>The Tragically Hip (Self-Titled) - <em>1987</em></li>
<li>Up To Here - <em>1989</em></li>
<li>Road Apples - <em>1991</em></li>
<li>Fully Completely - <em>1992</em></li>
<li>Day for Night - <em>1994</em></li>
<li>Trouble at the Henhouse - <em>1996</em></li>
<li>Phantom Power - <em>1998</em></li>
<li>Music @ Work - <em>2000</em></li>
<li>In Violet Light - <em>2002</em></li>
<li>In Between Evolution - <em>2004</em></li>
<li>World Container - <em>2006</em></li>
<li>We Are the Same - <em>2009</em></li>
<li>Now for Plan A - <em>2012</em></li>
</ul>
<h5>Solo Work</h5>
<ul>
<li>Coke Machine Glow - <em>2001</em></li>
<li>Battle of the Nudes - <em>2003</em></li>
<li>The Grand Bounce - <em>2010</em></li>
<li>Secret Path - <em>2016</em></li>
</ul>
</div>
</body>
</html>