使用 Bootstrap 时遇到一个奇怪的问题。
有一个简单的页面,由两部分组成:
1.修改后的标准模板Cover
(http://v4-alpha.getbootstrap.com/examples/cover/)2
.下面和section
里面是标准行,列等。
Cover
顶部 ( ) 和下面的部分之间有一个缩进。理论上 - 半透明body
,虽然背景颜色不是白色而是灰色。
问题是我无法更改正文的背景颜色。
CSSbody
显然只影响我看不到的封面后面的背景。
我通过控制台检查了它:奇怪 - 它body
覆盖了整个页面(包括封面和部分),但是当您将鼠标悬停在控制台中的 body 上时,页面上只有该区域突出显示Cover
,它们之间没有section
空格。如果您将控制台悬停在section
-section
在页面上,它会被正确选择。
这里可能是什么问题?在此先感谢!
更新程序
看来我明白了原因: CSS
shiblon Cover
setshtml
和body
height="100%", в результате чего их высота становится равна размеру окна браузера. Не совсем понимаю, почему в таком случае, фоновый цвет
body`在整个文档中发生了变化?..
但主要问题是如何用body
另一种元素代替?随着页面在下方继续,body
它不应限于Cover
. 我试图附上Cover
并div
问他同样的那些CSS
,body
但它不起作用。
这是代码(在 jsfiddle 上显示更正确): https ://jsfiddle.net/x3ju0d9w/
/*
* Globals
*/
/* Links */
a,
a:focus,
a:hover {
color: #fff;
}
/* Custom default button */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
color: #333;
text-shadow: none;
/* Prevent inheritance from `body` */
background-color: #fff;
border: .05rem solid #fff;
}
/*
* Base structure
*/
html,
body {
height: 100%;
background-color: #333;
}
body {
color: #fff;
text-align: center;
text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
}
/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
display: table;
width: 100%;
height: 100%;
/* For at least Firefox */
min-height: 100%;
-webkit-box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}
.site-wrapper-inner {
display: table-cell;
vertical-align: top;
}
.cover-container {
margin-right: auto;
margin-left: auto;
}
/* Padding for spacing */
.inner {
padding: 2rem;
}
/*
* Header
*/
.masthead {
margin-bottom: 2rem;
}
.masthead-brand {
margin-bottom: 0;
}
.nav-masthead .nav-link {
padding: .25rem 0;
font-weight: bold;
color: rgba(255, 255, 255, .5);
background-color: transparent;
border-bottom: .25rem solid transparent;
}
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
border-bottom-color: rgba(255, 255, 255, .25);
}
.nav-masthead .nav-link + .nav-link {
margin-left: 1rem;
}
.nav-masthead .active {
color: #fff;
border-bottom-color: #fff;
}
@media (min-width: 48em) {
.masthead-brand {
float: left;
}
.nav-masthead {
float: right;
}
}
/*
* Cover
*/
.cover {
padding: 0 1.5rem;
}
.cover .btn-lg {
padding: .75rem 1.25rem;
font-weight: bold;
}
/*
* Footer
*/
.mastfoot {
color: rgba(255, 255, 255, .5);
}
/*
* Affix and center
*/
@media (min-width: 40em) {
/* Pull out the header and footer */
.masthead {
position: fixed;
top: 0;
}
.mastfoot {
position: fixed;
bottom: 0;
}
/* Start the vertical centering */
.site-wrapper-inner {
vertical-align: middle;
}
/* Handle the widths */
.masthead,
.mastfoot,
.cover-container {
width: 100%;
/* Must be percentage or pixels for horizontal alignment */
}
}
@media (min-width: 62em) {
.masthead,
.mastfoot,
.cover-container {
width: 42rem;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">Cover</h3>
<nav class="nav nav-masthead">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Contact</a>
</nav>
</div>
</div>
<div class="inner cover">
<h1 class="cover-heading">Cover your page.</h1>
<p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
<p class="lead">
<a href="#" class="btn btn-lg btn-secondary">Learn more</a>
</p>
</div>
<div class="mastfoot">
<div class="inner">
<p>Cover template for <a href="https://getbootstrap.com">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="sectionSecond">
<div class="container">
<div class="row">
<div class="col-md-3">
<h1>Column-left</h1>
</div>
<div class="col-md-6">
<h1>Column-middle</h1>
</div>
<div class="col-md-3">
<h1>Column-right</h1>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
再次提前致谢!
body
删除._html, body { height: 100%; }
_为了
.cover
占满屏幕的高度,给它赋值.cover { height: 100vh }
。vh
(视口高度)- 测量单位,表示屏幕高度的百分比。