时间戳

首页 > 解决方案 > 在最终确定网站骨架时尝试引导程序并获取底部滚动条

html - 在最终确定网站骨架时尝试引导程序并获取底部滚动条

问题描述

尝试引导程序并获得底部滚动条。这似乎与边缘有关，但无法弄清楚。这是我的以下代码。

我附上了我的代码的照片，但没有复制 bootstrap.css 文件，它可以在这里找到：

https://getbootstrap.com/docs/5.0/getting-started/download/

<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-dark fixed-top bg-enter code hereprimary">
            <div class="container">
                <a class="navbar-brand" href="./index.html">
                    <img src="./imgs/LogoWhitePlain.png" width="35" height="30" class="d-inline-block align-top" alt="DKDESIGNS">
                </a>
                <!--Logo-->
                <div class="collapse navbar-collapse" id="navbarCollapsem">
                    <ul class="nav navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link active" href="./index.html">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="./services.html">Services</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="./projects.html">Projects</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="./aboutMe.html">About Me</a>
                        </li>
                    </ul>
                </div>
                <!--navigation-->
            </div>
        </nav>
        <!--nav bar-->
    </header>
    <main role="main">
        <!--main content-->
        <div class="bg-dark container-">
            <div class="row">
                <div class="col-md-2 col-sm-4">
                    <img src="imgs/LogoWhite.png" class="my-sm-4" width="175" height="150" class="d-inline-block align-top" alt="">
                    <!--Logo-->   
                </div>    
                <div class="col-md-10 col-sm-8">
                    <!--<h3 class="display-4 text-primary pt-5"><strong></strong></h3>-->
                    <h4 class="display-5 pt-3 mt-sm-5">
                        <em class="text-white text-left">
                            Designs made easy!
                        </em>
                    </h4>
                </div>
            </div>
        </div>
        <div class="container my-4">
            <div class="row">
                <!--first row-->
                <div class="col-md-8 col-lg-9">
                    <h4 class="display-6 text-muted text-capitalize">Our mission</h4>
                    <p>
                        Our goal is to simplify the art of designing anything for your business, whether it be 
                        a detailed logo for your company's new look, photogtaphy for an special event or employee photos, a new 
                        website and/or design to be developed for your business, or a design for an advertisements 
                        to attract new customers/clients. We can help to make it easy and efficient, so that you can 
                        focus on the other important aspects of your business. So lets get started on a <u>your</u> project today!
                    </p>
                </div>
                <div class="col-md-4 col-lg-3 text-center py-5 bg-primary border border-dark border-3">
                    &nbsp;
                    <h4 class="text-white">Get your FREE Quote!</h4>
                    <a href="./quoteMe.html"><button class="btn btn-dark">Here</button></a>
                </div>

            </div>
        </div>
    </main>
    <footer>
        <!--footer content-->
        <div class="text-center">
            <small class="text-muted text-center">&copy;&nbsp;Daniel Krysty 2021</small>
        </div>
        <div class="row text-center">
            <div class="col-1 offset-2">
                <small>
                    <a class="text-decoration-none text-muted"href="./index.html">Home</a>
                </small>
            </div>
            <div class="col-1">
                <small>
                    <a class="text-decoration-none text-muted"href="./services.html">Services</a>
                </small>
            </div>
            <div class="col-1">
                <small>
                    <a class="text-decoration-none text-muted"href="./projects.html">Projects</a>
                </small>
            </div>
            <div class="col-1">
                <small>
                    <a class="text-decoration-none text-muted"href="./aboutMe.html">About</a>
                </small>
            </div>
            <div class="col-1">
                <small>
                    <a class="text-decoration-none text-muted"href="./contact.html">Contact</a>
                </small>
            </div>
            <div class="col-1">
                <small>
                    <a class="text-decoration-none text-muted"href="./websites.html">Websites</a>
                </small>
            </div>
            <div class="col-1">
                <small>
                    <a class="text-decoration-none text-muted"href="./designs.html">Designs</a>
                </small>
            </div>
            <div class="col-1">
                <small>
                    <a class="text-decoration-none text-muted"href="./photography.html">Photography</a>
                </small>
            </div>
        </div>
    </footer>
</body>

附加的 css 文档，这是为了帮助覆盖我从 bootsrtap 网站获得的 bootstrap.css 代码。我正在使用 v5.0.2 不确定这是否与它有关。我下载了编译好的css和javascript文件。bootstrap.css 文件是我正在使用的文件

 body {
    padding-top: 3rem;
    padding-bottom: 3rem;
    width: 100%;
    /*background-image: url('../imgs/pattern.png');*/
    /*background-repeat: repeat;*/
}

.bg-primary {
    background-color: rgb(9, 129, 109) !important;
}

.btn-primary {
    background-color: rgb(9, 129, 109) !important;
    border-color: black !important;
}

.text-primary {
    color: rgb(9, 129, 109) !important;

}

.border-primary {
    border-color: rgb(9, 129, 109) !important;

}

.jumbotron-detail-skyline {
    background: url('../imgs/skykine_BW_new2.jpg') no-repeat fixed;
}

.jumbotron {
    height: 30vh;
    background-size: cover;
    background: black;
    width: 100%;
}
main {
    margin: auto;
}

标签： htmlcssbootstrap-5

解决方案

-下课后你有一个炒作container：

<main role="main">
    <!--main content-->
    <div class="bg-dark container-">

请删除连字符并重-试。

推荐阅读