这是我的第一个引导程序设计，我认为我做得很好，但我的朋友刚刚指出我在浏览器中有一个水平滚动条。这是在哪里发生的，为什么会发生？*水平滚动 -> 在浏览器中从左到右滚动条。如果您想直接查看该网站，请访问以下链接：https : //affattraction.com
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AffAttraction | Performance Based Marketing Network</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.mini.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- Header -->
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">AffAttraction</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="index.html">Home</a></li>
<li><a href="advertisers.html">Advertisers</a></li>
<li><a href="publishers.html">Publishers</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
<form class="navbar-form navbar-right">
<input type="email" name="email" class="form-control" placeholder="Email" required="">
<input type="password" name="password" class="form-control" placeholder="Password" required="">
<button type="submit" class="btn btn-green">Login <span class="glyphicon glyphicon-log-in"></span></button>
</form>
</div>
</div>
</nav>
</header>
<!-- Header -- >
<!-- Showcase -->
<div id="showcase">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1><span class="highlight">Performance</span> Based Marketing</h1>
<p>Do you have traffic? Do you want to monetize it? AffAttraction can help you earn more from your websites, apps, games, blogs, and more!</p>
<center><a href="advertisers.html"><button class="btn btn-showcase">Advertisers</button></a>
<a href="publishers.html"><button class="btn btn-showcase">Publishers</button></a></center>
</div>
</div>
</div>
</div>
<!-- Showcase -->
<!-- Overview -->
<div id="overview">
<div class="contianer">
<div class="row">
<div class="col-sm-6">
<h1>What is AffAttraction?</h1>
<p>AffAttraction is a CPA (Cost-Per-Action) Affiliate Network consisting of the top converting and highest paying ad campaigns around the globe. We offer a easy-to-use custom tracking platform with advanced tracking, advanced tools, and top support.</p>
</div>
<div class="col-sm-6">
<h1>Why Choose AffAttraction?</h1>
<p>We strive to provide the latest tools and features for our advertisers and publishers to bring you the best experience in CPA Marketing. We also offer the top converting and highest paying ad campaigns around the globe.</p>
</div>
</div>
</div>
</div>
<!-- Overview -->
<!-- Features -->
<div id="features">
<div class="container">
<div class="row">
<div class="col-sm-6">
<h1>•Customizable Payouts</h1>
<p>Every affiliate has customizable payouts depending on your revenue stream. If your traffic is good and you exceed the minimum amount for that month/week, contact us and we can re-schedule your payment dates.</p>
</div>
<div class="col-sm-6">
<h1>•Detailed Reports and Statistics</h1>
<p>Our custom tracking platform although very easy-to-use is very complex and tracks every detail of a click. Generate reports in real-time in the reports seciton of your publisher panel.</p>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<h1>•Highest Conversion Rates</h1>
<p>We don't waste our time adding offers that do not convert. Every offer on our network has been hand tested to make sure it converts correctly. Higher conversion rates means more revenue oppourtunities!
</div>
<div class="col-sm-6">
<h1>•Daily Support</h1>
<p>Our Dedicated Affiliate Managers are here 7 days a week to help you through any encounters you may have while working with AffAttraction!</p>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<h1>•Exclusive Tools</h1>
<p>Postback and API are a some of the tools you will be able to use while working with AffAttraction. Don't forget, we will be adding more in the future!</p>
</div>
<div class="col-sm-6">
<h1>•User Privacy</h1>
<p>Don't worry, we will never share your information with 3rd Parties. Your personal information is secure when entering anything our our domain. User protection is high priority with AffAttraction!</p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<a href="publishers/register.php"><button class="btn btn-get-started">Get Started</button></a>
</div>
</div>
</div>
</div>
<!-- Features -->
<!-- Footer -->
<div class="footer-header">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<h1>About Us</h1>
<p>AffAttraction is a Performance Based Marketing Network helping publishers earn more from thier traffic by offering advanced tracking, exclusive tools, top support and the highest paying ad campaigns around the globe.</p><br>
<p><b>Join our Network <br>and Start Earning from your Traffic!</b></p>
</div>
<div class="col-sm-4">
<h1>Network</h1>
<p><a href="blog.html">->Blog</a></p>
<p><a href="publishers/login.php">->Login</a></p>
<p><a href="terms.html">->Terms of Service</a></p>
<p><a href="privacy.html">->Privacy Policy</a></p>
<p><a href="contact.html">->Contact Us</a></p>
</div>
<div class="col-sm-4">
<h1>AffAttraction</h1>
<p>RR1 Box 3010 Rock Branch Road<br>
Poca, WV 25159 - United States</p><br>
<a href="contact.html">Contact Us:</a>
<a href="mailto:[email protected]">[email protected]</a>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
</div>
<div class="row">
<div class="col-sm-12">
<p>© 2017 AffAttraction. All Rights Reserved.</p>
</div>
</div>
</div>
</footer>
<!-- footer -->
<script src="js/jquery.js"></script>
<script src="js/jquery.mini.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.mini.js"></script>
</body>
</html>
CSS
body {
font-family: Helvetica, sans-serif;
background-color: #F4F4F4;
}
/* Global */
.btn-green {
background-color: #00FF00;
border: none;
}
.btn-green:hover {
background-color: #32CD32;
border: none;
}
.highlight {
color: #32CD32;
}
.btn-showcase {
height: 50px;
width: 140px;
margin: 10px;
background-color: #00FF00;
border: none;
font-size: 16px;
color: black;
transition: all 0.3s ease-in-out;
}
.btn-showcase:hover {
height: 50px;
width: 140px;
margin: 10px;
background-color: #32CD32;
border: none;
font-size: 16px;
color: black;
}
.btn-get-started {
height: 50px;
width: 100%;
margin: 10px;
background-color: white;
border: black 3px solid;
border-radius: 0;
font-size: 16px;
color: black;
transition: all 0.5s linear;
}
.btn-get-started:hover {
height: 50px;
width: 100%;
margin: 10px;
background-color: black;
border: white 3px solid;
border-radius: 0;
font-size: 16px;
color: white;
}
/* Header */
.navbar-default {
background-color: #418DD9;
border: none;
border-radius: 0px;
min-height: 60px;
}
.navbar a {
color: white !important;
border-top: #418DD9 3px solid;
}
.navbar-nav a:hover {
color: white !important;
border-top: #00FF00 3px solid;
}
.navbar-brand {
font-size: 25px !important;
}
.navbar-form {
padding-top: 5px;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: white !important;
}
/* Showcase */
#showcase {
margin-top: -20px;
min-height: 400px;
color: #FFFFFF !important;
background: url('../img/showcase.jpg') fixed;
border: none;
position: relative;
}
#showcase h1 {
font-size: 60px;
text-align: center;
padding-top: 40px;
}
#showcase p {
font-size: 20px;
text-align: center;
padding-top: 15px;
}
/* Overview */
#overview {
padding: 10px;
background-color: #DCDCDC;
}
#overview h1 {
font-size: 35px;
text-align: center;
color: black;
}
#overview p {
font-size: 16px;
text-align: center;
color: black;
}
/* Footer Bottom */
footer {
background-color: #4169E1;
color: #FFFFFF;
min-height: 60px;
}
footer p {
font-size: 15px;
padding-top: 20px;
}
.footer-header {
background-color: #418DD9;
color: #FFFFFF;
}
.footer-header h1 {
font-size: 20px;
}
.footer-header a {
color: #FFFFFF;
text-decoration: none;
transition: all 0.3s linear;
}
.footer-header a:hover {
color: #00FF00;
}
/* Features */
#features {
padding-top: 10px;
padding-bottom: 10px;
}
#features h1 {
font-size: 25px;
font-weight: bold;
}
另外，我正在使用引导程序（最新版本），因此它可能是他们文件中的某些内容，但我不这么认为。我没有注意到这一点，所以我不知道它是从哪里开始的。
你在后面拼错了“container” <div id="overview">
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句