BOOTSTRAP：模板中的粘滞页脚不粘滞

I'm now on the point i want to open my window and dump my pc. I used the footer template from the tutorial of bootstrap.
It looks fine, but when my text is longer than one page, my footer stays on that location and goed not under the text like it shoud be.
I just want that when my page is longer, my footer stays on the end of the page. Not all my pages are gonne be this small. So please send some help :)
how it seems to work how its not working

.dropdown-toggle::after {
  display: none;
}

.text-decoration-none {
  text-decoration: none!important;
}

/* Font Awesome Icons have variable width. Added fixed width to fix that.*/

.icon-width {
  width: 2rem;
}

nav .active a {
  color: black;
  font-weight: 600;
}

nav {
  font-weight: bree, sans-serif;
}

.bg-world {
  background-image: url('../img/bg-1.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 90vh;
}

.padding {
  padding: 10rem;
}

.box-land {
  background: rgb(245, 245, 245);
  background: linear-gradient(143deg, rgba(245, 245, 245, 0.8547794117647058) 49%, rgba(203, 186, 186, 1) 100%);
  border-radius: 20px;
  border: 3px solid black;
  padding: 1rem;
}

.box-land h2 {
  margin-bottom: 2rem;
}

.box-land img {
  width: 100%;
  margin-bottom: 1rem
}

.footer {
  height: 3rem;
}

@media screen and (max-width: 1000px) {
  .footer {
    display: none !important;
  }
}

.footer img {
  height: 2rem;
  width: auto;
  margin-left: 100%;
  margin-right: 0;
}

.footer .copyright {
  margin-top: 0.25rem;
  margin-left: 1rem;
}

.bg-strech {
  height: 90vh;
}

.bd-placeholder-img {
  background-image: url("../img/bg-1.png");
}

.card-img-info {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<!doctype htms>
<htms lang="en">

  <head>
    <meta charset="UTF-8">
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://kit.fontawesome.com/f47aba7ed6.js" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="assets/css-js/style-main.css">
    <title>Document</title>
  </head>

  <body class="d-flex flex-column min-vh-100">
    <header class="d-flex justify-content-center py-3">
      <nav class="navbar navbar-expand-lg navbar-light shadow-sm bg-light fixed-top">
        <div class="container">
          <a class="navbar-brand d-flex align-items-center" href="#">
            <img src="assets/img/Logo_COW_Balk.png" alt="logo" width="100">
          </a>
          <button class="navbar-toggler navbar-toggler-right border-0" type="button" data-toggle="collapse" data-target="#navbar4">
                        <span class="navbar-toggler-icon"></span>
                    </button>

          <div class="collapse navbar-collapse" id="navbar4">
            <ul class="navbar-nav me-auto pl-lg-4">
              <li class="nav-item px-lg-2">
                <a class="nav-link" href="index.html"> <span class="d-inline-block d-lg-none icon-width"><i class="fas fa-home"></i></span>Home</a>
              </li>
              <li class="nav-item px-lg-2 active"><a class="nav-link" href="info.html"><span
                                    class="d-inline-block d-lg-none icon-width"><i class="fas fa-spa"></i></span>Info</a>
              </li>
              <li class="nav-item px-lg-2"><a class="nav-link" href="#"><span
                                    class="d-inline-block d-lg-none icon-width"><i class="far fa-user"></i></i></span>Legende</a>
              </li>

              <li class="nav-item px-lg-2 dropdown d-menu">
                <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span
                                        class="d-inline-block d-lg-none icon-width"><i class="far fa-caret-square-down"></i></span>Dropdown
                                    <svg id="arrow" xmsns="http://www.w3.org/2000/svg" width="14" height="14"
                                         viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                         stroke-linecap="round" stroke-linejoin="round">
                                        <polyline points="6 9 12 15 18 9"></polyline>
                                    </svg>
                                </a>
                <div class="dropdown-menu shadow-sm sm-menu" aria-labelledby="dropdown01">
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
              </li>

              <li class="nav-item px-lg-2"><a class="nav-link" href="#"><span
                                    class="d-inline-block d-lg-none icon-width"><i class="far fa-envelope"></i></span>Contact</a>
              </li>
            </ul>
            <ul class="navbar-nav ms-auto mt-3 mt-lg-0">
              <li class="nav-item">
                <a class="nav-link" href="#">
                  <i class="fab fa-twitter"></i><span class="d-lg-none ms-3">Twitter</span>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">
                  <i class="fab fa-facebook"></i><span class="d-lg-none ms-3">Facebook</span>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">
                  <i class="fab fa-instagram"></i><span class="d-lg-none ms-3">Instagram</span>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">
                  <i class="fab fa-linkedin"></i><span class="d-lg-none ms-3">Linkedin</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </header>
    <main class="flex-fill">
      <div class="text-center text-blue bg-strech">
        <div class="container py-5 align-items-center">

          <div class="row justify-content-center h-90  flex-grow-1">
            <div class="card p-3 mb-4">
              <figure class="p-3 mb-0">
                <blockquote class="blockquote">
                  <p>Dit idee is ontstaan omdat ik interesse begon te krijgen in staatkunde en de administratieve onderverdeling van België. Ik zocht een kaart waar alle gemeenten opstonden met hun subdivisies, maar ik vond geen makkelijk toegankelijke kaart,
                    daarom ben ik op pad gegaan om zo'n kaart te maken met mijn kennis van grafisch ontwerpen en coderen. Het nut van de website is dat alle geïnteresseerden op één plaats terecht komen waar alles te vinden is. Dit is zowel voor oud als
                    jong. Zo kunnen mensen ook meer bewust worden van hun omgeving en land.</p>

                  <p>Ik kan dit natuurlijk niet alleen daarom zoek ik contact op met elke gemeente in België om info te vragen over hun gemeenten zoals: wat is de onderverdeling, waar liggen de grenzen, etc... Van veel gemeenten heb ik feedback gekregen
                    en dit helpt het proces te versnellen om het project af te werken. Ik doe dit alleen en op eigen initiatief daarom ben ik dankbaar voor alle mensen de mij willen sponseren en steunen in dit avontuur. Dank aan jullie allemaal.</p>
                </blockquote>
                <figcaption class="blockquote-footer mb-0 text-muted">
                  Achilles Gossaert (16) uit Roeselare
                </figcaption>
              </figure>
            </div>
          </div>
        </div>
      </div>
    </main>

    <footer class="footer mt-auto py-3 bg-light">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-md-1 justify-content-right">
            <img src="./assets/img/footer-img.png" alt="Achilles Gossaert" title="Argentum">
          </div>
          <div class="col-md-4 copyright">
            <p class="mb-0">©
              <script>
                document.write(/\d{4}/.exec(Date())[0])
              </script>
              COW. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
          </div>
          <div class="col-md-4 copyright text-end">
            <p>Design by <a href="https://onlinedevelopment.be">Online Development</a></p>
          </div>
        </div>
      </div>
    </footer>
    <script src="assets/css-js/nav.js"></script>
  </body>
</htms>

BOOTSTRAP：模板中的粘滞页脚不粘滞

1条答案

相关问题

热门标签

最新问答