个人中心
gpt4 book ai didi

html - 我的页面坏了，我不知道为什么他们是水平滚动，而应该没有

转载 作者：行者123 更新时间：2023-11-28 15:25:19 27 4
gpt4 key购买 nike

这是我的第一个 bootstrap 设计，我认为我做得很好，但我的 friend 刚刚指出我在浏览器中有一个水平滚动条。这是在哪里发生的，为什么会发生？ *Horizo​​ntal Scroll -> 在浏览器中从左到右滚动条。如果您想直接查看该站点，请访问以下链接: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 (最新版本)，所以它可能在他们的文件中，但我不这么认为。我没有注意到这一点，所以我不知道它是从哪里开始的。

最佳答案

您在 <div id="overview"> 之后拼错了“container”

关于html - 我的页面坏了，我不知道为什么他们是水平滚动，而应该没有，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45355476/

27 4 0
文章推荐： css - PrimeFaces 菜单栏， float :right 上的最后一个菜单项
文章推荐： javascript - 将外部导航栏加载到多个 html 页面中
文章推荐： javascript - CSS 样式 td 元素取决于 td 宽度
文章推荐： javascript - 动态检查文本区域中现有项目的复选框组
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com