Html 引导:Can';t向网格行添加背景色
我对Bootstrap很陌生。我正在开发一个非常简单的网站。但是,在向“我的行”中添加背景色属性时遇到问题。我希望有人能帮我找出哪里出了问题 这是我的HTML文件Html 引导:Can';t向网格行添加背景色,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我对Bootstrap很陌生。我正在开发一个非常简单的网站。但是,在向“我的行”中添加背景色属性时遇到问题。我希望有人能帮我找出哪里出了问题 这是我的HTML文件 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head
content must come *after* these tags -->
<title>Pizza Store</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/mystyles.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<header class="jumbotron">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8">
<h1>Pizza Store</h1>
</div>
</div>
</div>
</header>
<div class="containter">
<div< class="row menu-content">
<div class="col-xs-12">
<hr>
</div>
<div class="col-xs-12 col-sm-8">
<h3>Vegetable Pizza</h3>
</div>
<div class="col-xs-12 col-sm-4">
A Pizza with Vegetables on it
</div>
<div class="col-xs-12">
<hr>
</div>
</div>
<div< class="row menu-content">
<div class="col-xs-12">
<hr>
</div>
<div class="col-xs-12 col-sm-8">
<h3>Cheese Pizza</h3>
</div>
<div class="col-xs-12 col-sm-4">
A Pizza with only cheese
</div>
<div class="col-xs-12">
<hr>
</div>
</div>
</div>
</body>
除了菜单内容类样式外,所有类都工作正常。在该类中,唯一不起作用的是background color属性。有人能解释一下为什么会这样吗
感谢您的帮助
。菜单内容
后台工作正常,但您的标记中没有.row-footer
。有什么问题吗?@MichaelCoker还有我当时的想法。@MichaelCoker-真奇怪。由于某些原因,在我运行它时,它没有应用背景色。另外,关于页脚,我将在后面添加它。我还在写网页。编辑:但是,在我用class=“menu content”将div标记中的每一行或每一行放入之后,它确实起作用了。这就是应该怎么做的吗?检查所有CSS文件是否正确链接并应用于HTML页面。我还注意到一些代码错误,例如,其中有一个
,还有
。最后,尝试在CSS文件中包含div.menu-content
而不是.menu-content
。@dat3450-谢谢。原来是打字错误。很抱歉浪费了你的时间。仍在努力适应跟踪一切。
.row-header{
margin:0px auto;
padding:0px auto;
}
.menu-content {
margin:0px auto;
padding: 50px 0px 50px 0px;
border-bottom: 1px ridge;
min-height:400px;
background-color: #76A0D3;
}
.row-footer{
background-color: #AfAfAf;
margin:0px auto;
padding: 20px 0px 20px 0px;
}
.jumbotron {
padding:70px 30px 70px 30px;
margin:0px auto;
background: black;
color: white;
}
address{
font-size:80%;
margin:0px;
color:#0f0f0f;
}
hr {
display: block;
position: relative;
padding: 0;
margin: 8px auto;
height: 0;
width: 100%;
max-height: 0;
font-size: 1px;
line-height: 0;
clear: both;
border: none;
border-top: 1px solid #aaaaaa;
border-bottom: 1px solid #ffffff;
}