【发布时间】：2016-05-26 05:03:25
【问题描述】：
我正在使用 bootstrap 为我的乐队创建一个网站。这是我第一次真正尝试正确开发网站。我在让我的元素正确清除彼此时遇到了一些麻烦。我已经包含了我的 github 存储库，以便您可以提取所有内容并在您的机器上检查它。
每次我向页面添加新内容时，新内容似乎会滑到它上面的内容之下。我不知道为什么要这样做，因为它们是块元素。明确：两者；似乎不起作用，我不想用诸如“top：32px;”之类的css属性来抵消一些东西
任何帮助将不胜感激。
Github 仓库：https://github.com/Ominix/coldclockknockout
如果你不在 Github 上，这里是原始代码。
<!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>Coldclock Knockout</title>
<!-- Bootstrap -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="style.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>`
<!--NAVBAR TOP============================================================-->
<nav class="navbar navbar-inverse navbar-fixed-top" id="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<!--This is the three bars that open the menu-->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--This is the first button on the left side of Navbar-->
<a class="navbar-brand" href="index.html">Coldclock Knockout</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">News<span class="sr-only">(current)</span></a></li>
<li><a href="MUSIC.html">MUSIC</a></li>
<li><a href="store.html">Store</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!--HERO IMAGE================================================================-->
<!-- Mobile hero -->
<div id="mobleJumbotron" class="jumbotron">
<img src="images/jumbotron.jpg" alt="cd release promo">
</div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
<li data-target="#myCarousel" data-slide-to="6"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/jumbotron.jpg" alt="cd release promo">
</div>
<div class="item">
<img src="images/Coldclock Knockout Local 662 (1).jpg" alt="Crowd Shot1">
</div>
<div class="item">
<img src="images/Coldclock Knockout Local 662 (10).jpg" alt="Robby and Ryan in blue">
</div>
<div class="item">
<img src="images/Coldclock Knockout Local 662 (49).jpg" alt="Ryan 1">
</div>
<div class="item">
<img src="images/Coldclock Knockout Local 662 (50).jpg" alt="Bryan 1">
</div>
<div class="item">
<img src="images/Coldclock Knockout Local 662 (45).jpg" alt="Robby 1">
</div>
<div class="item">
<img src="images/Coldclock Knockout Local 662 (48).jpg" alt="Crowd Shot2">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="container-fluid mainContent">
<div class="row">
<div class="col-md-4">
<h1>THIS IS CONTENT NOW</h1>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12">
<ul class="list-inline">
<li>
<a href="#">Home</a>
</li>
<li class="footer-menu-divider">⋅</li>
<li>
<a href="#about">About</a>
</li>
<li class="footer-menu-divider">⋅</li>
<li>
<a href="#services">Services</a>
</li>
<li class="footer-menu-divider">⋅</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
<p class="copyright text-muted small">Copyright © Your Company 2014. All Rights Reserved</p>
</div>
</div>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="assets/js/bootstrap.min.js"></script>
</body>
</html>
...和 CSS
html {
height: 100%;
}
body {
background-color: black;
height: 100%;
}
/*================================================================================================
NAVIGATION
================================================================================================*/
.active {
border-bottom: 1px solid red;
}
.navbar-inverse .navbar-nav > .active > a{
font-size: 1.25em;
}
#navigation {
margin-bottom: 0px;
border-radius: 0px;
}
/*================================================================================================
JUMBOTRON
================================================================================================*/
#myCarousel {
top: 32px;
height: 500px;
}
#myCarousel img {
margin: 0 auto;
height: 500px;
}
/* begin moblie banner*/
.jumbotron {
margin: 0 auto;
padding: 0;
}
.jumbotron img {
margin: 0 auto;
width: 100%;
}
#mobleJumbotron {
display: none;
width: 100%;
}
@media screen and (min-width: 0px) and (max-width: 800px) {
#myCarousel {
display: none;
}
#mobleJumbotron {
display: block;
}
}
/*================================================================================================
Main content on home page
================================================================================================*/
/*================================================================================================
FOOTER
================================================================================================*/
我知道我在这里可能有很多不必要/冗余的代码。毕竟我是菜鸟。
任何帮助将不胜感激。
【问题讨论】：
标签： jquery html css twitter-bootstrap frontend