Question

这是我的第一个bootstrap设计，我觉得我做得很好，但我的朋友刚刚指出我在浏览器中有一个水平滚动。这是怎么回事？它为什么会发生？ *水平滚动 - ＆gt;在浏览器中从左到右滚动条。如果您想直接查看网站，请点击链接：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:affiliate@affattraction.com">affiliate@affattraction.com</a>
                    </div>
                </div>
            </div>
        </div>
    <footer>
        <div class="container">
            <div class="row">
            </div>
            <div class="row">
                <div class="col-sm-12">
                <p>&copy; 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;
}

另外，我正在使用bootstrap（最新版本），所以它可能是他们的文件中的东西，但我不这么认为。我没有注意到这一点，所以我不知道它从哪里开始。

Answer 1

你拼错了＃34;容器＆＃34;在200 201 202

之后

Answer 2

#overview元素存在问题，如果删除row下的container，您会看到它将被修复。

我的页面坏了，我不知道为什么它们应该没有时是水平滚动

2 个答案: