我创建了这个网站http://fusioninfinite.com/DianeFH/，希望它能在移动设备上正确显示。虽然它在我的电脑上看起来很好，但我已经在我的iPod上进行了测试，当您滚动时，页眉，导航栏和页脚背景颜色不会延伸到页面的其余部分。我认为这是宽度为100％的问题，但我不确定
这是我使用bootstrap的HTML代码：
<!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">
<meta name="description" content="Diane Swanson's website, online gallery and blog">
<meta name="author" content="Diane Swanson">
<meta name="keywords" content="diane, swanson, Diane Swanson, artist, freehawk art, art, freehawk, watercolor, visual artist, American Women Artists, artist, painting, landscapes">
<link rel="icon" href="../../favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
<title>Diane Swanson - Home</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="blog.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[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>
<div style="width:100%; background-color:#303030; class="blog-masthead">
<div align="center" style="width:100%; height:120px; background-color:#0b0b3b;">
<div style="width:740px; padding-top:40px;" align="left">
<h1 style="font-size:45px; font-family: 'Muli', sans-serif; color:lightgrey;">Diane Swanson</h1>
</div>
</div>
<div style="width:790px;" align="left" class="container">
<nav class="blog-nav">
<a class="blog-nav-item active" href="index.html">Home</a>
<a class="blog-nav-item" href="about.php">About</a>
<a class="blog-nav-item" href="exhibits.html">Current & Upcoming Exhibits</a>
<a class="blog-nav-item" href="portraits.html">House Portraits</a>
<a class="blog-nav-item" href="gallery.html">Gallery</a>
<a class="blog-nav-item" href="wordpress/index.php">Blog</a>
</nav>
</div>
</div>
<div class="container">
<div style="margin-top:20px;" align="center">
<img src="images/homeheader.jpg">
<br><br><br>
<h2 style="float:left; color:#000066;"><strong>DIANE SWANSON</strong></h2>
<h2 style="float:right; color:#000066; font-style: italic;">visual artist</h2>
<br><br><br>
<h4>Landscapes — Home/Building Portraits — Animal Portraits — Illustration</h4>
<br><br><br>
</div>
</div><!-- /.container -->
<div style="left:0; right:0;" class="blog-footer">
<p>Website designed and hosted by <a href="http://fusioninfinite.com">FusionInfinite WebDesign and Hosting</a></p>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/docs.min.js"></script>
</body>
</html>
这是我的CSS：
/*
* Globals
*/
body {
font-family: Georgia, "Times New Roman", Times, serif;
color: #555;
}
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
margin-top: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
color: #333;
}
/*
* Override Bootstrap's default container.
*/
.container {
width: 790px;
}
/*
* Masthead for nav
*/
.blog-masthead {
background-color: #428bca;
-webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
}
/* Nav links */
.blog-nav-item {
position: relative;
display: inline-block;
padding: 10px;
font-weight: 500;
color: #cdddeb;
}
.blog-nav-item:hover,
.blog-nav-item:focus {
color: #fff;
text-decoration: none;
}
/* Active state gets a caret at the bottom */
.blog-nav .active {
color: #fff;
}
.blog-nav .active:after {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
content: " ";
border-right: 5px solid transparent;
border-bottom: 5px solid;
border-left: 5px solid transparent;
}
/*
* Blog name and description
*/
.blog-header {
padding-top: 20px;
padding-bottom: 20px;
}
.blog-title {
margin-top: 30px;
margin-bottom: 0;
font-size: 60px;
font-weight: normal;
}
.blog-description {
font-size: 20px;
color: #999;
}
/*
* Main column and sidebar layout
*/
.blog-main {
font-size: 18px;
line-height: 1.5;
}
/* Sidebar modules for boxing content */
.sidebar-module {
padding: 15px;
margin: 0 -15px 15px;
}
.sidebar-module-inset {
padding: 15px;
background-color: #f5f5f5;
border-radius: 4px;
}
.sidebar-module-inset p:last-child,
.sidebar-module-inset ul:last-child,
.sidebar-module-inset ol:last-child {
margin-bottom: 0;
}
/* Pagination */
.pager {
margin-bottom: 60px;
text-align: left;
}
.pager > li > a {
width: 140px;
padding: 10px 20px;
text-align: center;
border-radius: 30px;
}
/*
* Blog posts
*/
.blog-post {
margin-bottom: 60px;
}
.blog-post-title {
margin-bottom: 5px;
font-size: 40px;
}
.blog-post-meta {
margin-bottom: 20px;
color: #999;
}
/*
* Footer
*/
.blog-footer {
padding: 40px 0;
color: #999;
text-align: center;
background-color: #f9f9f9;
border-top: 1px solid #e5e5e5;
}
.blog-footer p:last-child {
margin-bottom: 0;
}
答案 0 :(得分：3)
为了使您的网站响应，您使用的是Bootstrap，这很棒，但您使用的不正确。通过覆盖bootstrap的默认CSS，它只会破坏它，正如我之前所说的那样。你想要做的是包括你自己的DIV或自定义类，并将CSS应用于这些。
说到CSS，我建议在样式属性中避免使用内联CSS，并在单个样式表中重新组合所有CSS。之后您可以更轻松地编辑您的网站。在我的例子中，我添加了很多自定义类。
另外，不要使用BR标签，除了在P标签内打破文本行。要定义元素周围的空格，请使用MARGIN或PADDING
接下来，我注意到您将网站的内容或内容容器压缩到790px。如今，大多数屏幕分辨率往往介于1920px和1280px之间，当然不包括移动和平板电脑分辨率。通过压缩，您将：1）打破引导程序，2）将您的内容包含在页面中间，从而为具有更高分辨率屏幕的用户留下巨大的空白空间。
使用bootstrap很棒，但有效地使用它更好。不要害怕使用bootstrap来充分发挥它的潜力。在查看我对Html的看法时，请注意我如何滥用DIV容器并添加了所有的boostrap自己的行和列DIV。调整浏览器窗口大小时，您会发现所有元素都会跟随并且当没有更多空间可以并排放置时，所有元素都会相互叠加。
在样式表中，我添加了一些媒体查询。这样做很简单，它会检查浏览器的宽度是否达到我指定的阈值。如果是这样，我可以针对特定元素并应用其他CSS样式。如果浏览器的宽度恢复正常，则会删除其他CSS。
由于某些原因未知，我暂时无法为您创建一个Bootply示例。但您可以尝试通过添加我的代码来测试它，然后单击“播放”以查看其外观并对调整大小做出反应。 Bootply Website
如果您有任何疑问，请不要犹豫
这是完整的html：
<div class="header">
<div class="container name-container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h1>Diane Swanson</h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<nav class="blog-nav">
<ul>
<li><a class="blog-nav-item active" href="#">Home</a></li>
<li><a class="blog-nav-item" href="#">About</a></li>
<li><a class="blog-nav-item" href="#">Current & Upcoming Exhibits</a></li>
<li><a class="blog-nav-item" href="#">House Portraits</a></li>
<li><a class="blog-nav-item" href="#">Gallery</a></li>
<li><a class="blog-nav-item" href="#">Blog</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<div class="content-container">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<img class="blog-img" src="http://fusioninfinite.com/DianeFH/images/homeheader.jpg" alt="">
</div>
</div>
</div>
<div class="container middle-container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 leftbox">
<h2>Diane Swanson</h2>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 rightbox">
<h2>Visual artist</h2>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 description-container">
<h4>Landscapes — Home/Building Portraits — Animal Portraits — Illustration</h4>
</div>
</div>
</div>
</div>
<div class="blog-footer">
<p>Website designed and hosted by <a href="http://fusioninfinite.com">FusionInfinite WebDesign and Hosting</a></p>
</div>
这是CSS：
.header{
width: 100%;
background-color: #303030;
}
.header h1{
font-size: 45px;
font-family: 'Muli', sans-serif;
color: lightgrey;
margin-left: 8px;
}
.name-container{
padding-top: 25px;
}
.blog-nav ul{
margin: 0;
padding: 0;
}
.blog-nav li{
float: left;
}
.blog-nav-item{
position: relative;
display: inline-block;
padding: 10px;
font-weight: 500;
color: #cdddeb;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
}
.blog-nav-item:hover{
text-decoration: none;
color: #FFF;
}
.active{
color: #fff;
}
.blog-nav .active:after {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
content: " ";
border-right: 5px solid transparent;
border-bottom: 5px solid;
border-left: 5px solid transparent;
}
.blog-img{
max-width: 100%;
width: 1170px;
}
.content-container{
padding-top: 25px;
padding-bottom: 65px;
}
.middle-container{
padding-top: 10px;
}
.description-container{
text-align: center;
padding-top: 10px;
}
.leftbox h2{
color: #000066;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
text-transform: uppercase;
}
.rightbox h2{
float: right;
color: #000066;
font-style: italic;
}
.blog-footer{
padding: 40px 0;
color: #999;
text-align: center;
background-color: #f9f9f9;
border-top: 1px solid #e5e5e5;
}
/*MEDIA QUERIES*/
@media only screen and (max-width:770px) {
.rightbox h2{
float: none;
}
}
@media only screen and (max-width:585px) {
.blog-nav li {
float: none;
}
.blog-nav .active:after{
display: none;
}
}