我创建了这个网站http://fusioninfinite.com/DianeFH/希望它能在移动设备上正确显示。虽然它在我的 PC 上看起来不错，但我在 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;
}
最佳答案
为了使您的网站具有响应能力，您正在使用 Bootstrap，这很棒，但您使用它的方式不正确。正如我之前所说，通过覆盖 bootstrap 的默认 CSS，它只会破坏它。您想要做的是包含您自己的 DIV 或自定义类，并将 CSS 应用到这些。
说到 CSS，我建议避免在 style 属性中使用内联 CSS，并将所有 CSS 重新组合到一个样式表中。之后您可以更轻松地编辑您的网站。在我的示例中，我添加了很多自定义类。
此外，不要使用 BR 标记，除非为 P 标记内的文本换行。为了定义元素周围的空间，请使用 MARGIN 或 PADDING
接下来，我注意到您将网站的内容(或本例中的内容容器)压缩为 790 像素。如今，大多数屏幕分辨率往往在 1920 像素到 1280 像素之间，当然不包括移动设备和平板电脑分辨率。通过压缩，您将:1)破坏 Bootstrap ，2)将内容包含在页面中间，因此为具有更高分辨率屏幕的用户在两侧留下巨大的空白。
使用 bootstrap 很棒，但有效地使用它会更好。不要害怕使用 Bootstrap 来充分发挥其潜力。当查看我对 Html 的看法时，请注意我如何滥用 DIV 容器并添加了所有 boostrap 自己的行和列 DIV。调整浏览器窗口大小时，您会注意到，当没有更多空间让元素并排时，所有元素都会跟随并放置在彼此的顶部。
在样式表中，我添加了一些媒体查询。其作用很简单，它检查浏览器的宽度是否达到我指定的阈值。如果是这样，我可以针对特定元素并应用其他 CSS 样式。如果浏览器的宽度恢复正常，则附加的 CSS 将被删除。
出于某种未知的原因，我目前无法为您创建 Bootply 示例。但您可以尝试通过添加我的代码来测试它，然后单击“播放”以查看它的外观以及对调整大小的 react 。 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;
}
}
关于html - 网站页眉导航栏和页脚在移动设备上不会达到 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25145777/