css 我如何给flex-container添加页脚？

我正在尝试添加一个引导页脚到我的项目。它在大屏幕上工作得很好，但是当你开始缩小屏幕时，页脚被放在页面的中间而不是底部。我做错了什么？

@media only screen and (max-width: 1150px) {
  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
}
    <div class="bigcontainer">
      <div class="box1">
        <h3>RENOVATIONS</h3>
        <p><br /></p>
        <p>
          At <em>Razca Designs</em>, we specialize in interior renovation
          design, from small kitchen updates to complete home remodels. We have
          a wealth of experience and expertise in creating personalized spaces
          that reflect our clients’ unique styles and personalities.
        </p>
        <p><br /></p>
        <p>
          Our team will work closely with you every step of the way to bring
          your project to completion. We take the time to fully understand the
          specific challenges and pain points of each client in their current
          home, and use this information to design a tailor-made solution that
          addresses each individual need. Our approach is to provide you with a
          beautiful and functional home that you’ll love spending time in
        </p>
        <p><br /></p>
        <b>
          <em
            >Our passion is creating personalized, welcoming spaces that are
            tailored to you and your family. With Razca Designs, you can trust
            us to transform your home into a space that exceeds your
            expectations
          </em>
        </b>
      </div>
      <div class="box2">
        <img src="textimages/reno10.jpg" alt="" class="img-fluid" />
      </div>
      <div class="box3">
        <img src="textimages/renov-3.jpg" alt="" class="img-fluid" />
        <img src="textimages/ren101.jpg" alt="" class="img-fluid" />
      </div>
      <div class="box4">
        <h3>RENOVATIONS</h3>
        <p><br /></p>
        <ul class="ab">
          <li>
            Reviewing permits or managing permit applications if necessary
          </li>
          <li>reate the neceesary drawings, including:</li>
          <p>Existing and demolition plans</p>
          <p>Proposed plans</p>
          <p>Construction plans</p>
          <p>Electrical plans.</p>
          <p>Furniture Plans</p>
          <li>
            Providing materials and finishes according to your design palette
          </li>
          <li>Design of custom furniture</li>
          <li>Requesting quotes; ordering and coordinating deliveries</li>
          <li>Dealing contractors and craftsmen</li>
          <li>Dealing with suppliers and overseeing quality control</li>
          <li>
            Final design steps, like finishes and confirming forniture and
            cabinetery.
          </li>
        </ul>
      </div>
    </div>
    <!-- Footer -->
    <footer class="text-center text-lg-start bg-white text-muted">
      <!-- Section: Social media -->
      <section
        class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom"
      >
        <!-- Left -->
        <div class="me-5 d-none d-lg-block">
          <span>Get connected with us on social networks:</span>
        </div>
        <!-- Left -->

        <!-- Right -->
        <div>
          <a href="" class="me-4 link-secondary">
            <i class="fab fa-facebook-f"></i>
          </a>
          <a href="" class="me-4 link-secondary">
            <i class="fab fa-twitter"></i>
          </a>
          <a href="" class="me-4 link-secondary">
            <i class="fab fa-google"></i>
          </a>
          <a href="" class="me-4 link-secondary">
            <i class="fab fa-instagram"></i>
          </a>
          <a href="" class="me-4 link-secondary">
            <i class="fab fa-linkedin"></i>
          </a>
          <a href="" class="me-4 link-secondary">
            <i class="fab fa-github"></i>
          </a>
        </div>
        <!-- Right -->
      </section>
      <!-- Section: Social media -->

      <!-- Section: Links  -->
      <section class="">
        <div class="container text-center text-md-start mt-5">
          <!-- Grid row -->
          <div class="row mt-3">
            <!-- Grid column -->
            <div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
              <!-- Content -->
              <h6 class="text-uppercase fw-bold mb-4">
                <i class="fas fa-gem me-3 text-secondary"></i>Company name
              </h6>
              <p>
                Here you can use rows and columns to organize your footer
                content. Lorem ipsum dolor sit amet, consectetur adipisicing
                elit.
              </p>
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
              <!-- Links -->
              <h6 class="text-uppercase fw-bold mb-4">Products</h6>
              <p>
                <a href="#!" class="text-reset">Angular</a>
              </p>
              <p>
                <a href="#!" class="text-reset">React</a>
              </p>
              <p>
                <a href="#!" class="text-reset">Vue</a>
              </p>
              <p>
                <a href="#!" class="text-reset">Laravel</a>
              </p>
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
              <!-- Links -->
              <h6 class="text-uppercase fw-bold mb-4">Useful links</h6>
              <p>
                <a href="#!" class="text-reset">Pricing</a>
              </p>
              <p>
                <a href="#!" class="text-reset">Settings</a>
              </p>
              <p>
                <a href="#!" class="text-reset">Orders</a>
              </p>
              <p>
                <a href="#!" class="text-reset">Help</a>
              </p>
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
              <!-- Links -->
              <h6 class="text-uppercase fw-bold mb-4">Contact</h6>
              <p>
                <i class="fas fa-home me-3 text-secondary"></i> New York, NY
                10012, US
              </p>
              <p>
                <i class="fas fa-envelope me-3 text-secondary"></i>
                info@example.com
              </p>
              <p>
                <i class="fas fa-phone me-3 text-secondary"></i> + 01 234 567 88
              </p>
              <p>
                <i class="fas fa-print me-3 text-secondary"></i> + 01 234 567 89
              </p>
            </div>
            <!-- Grid column -->
          </div>
          <!-- Grid row -->
        </div>
      </section>
      <!-- Section: Links  -->

      <!-- Copyright -->
      <div
        class="text-center p-4"
        style="background-color: rgba(0, 0, 0, 0.025)"
      >
        © 2021 Copyright:
        <a class="text-reset fw-bold" href="https://mdbootstrap.com/"
          >MDBootstrap.com</a
        >
      </div>
      <!-- Copyright -->
    </footer>
    <!-- Footer -->
    <!-- Carousel wrapper -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
  </body>

我尝试添加引导页脚到我的项目。它在大屏幕上工作得很好，但当你开始缩小屏幕时，页脚被放置在页面的中间而不是底部。我做错了什么？这是我的屏幕截图

我就能知道我做错了什么

.bigcontainer {
  display: flex;
  flex-wrap: wrap;
  width: 98vw;
  align-items: center;
  margin: 20px;
  font-family: "sans";
  margin-left: 150px;
}
.bigcontainer::after {
  width: 98vw;

  position: absolute;
  z-index: -1;
  right: 0;
}

.bigcontainer > div {
  width: 50%;
  height: 50%;
  padding: 18px;
}

.box1 {
  margin-bottom: 20px;
}

.box3 {
  display: flex;
  gap: 10px;
}

.box3 img {
  width: 45%;
  height: 30rem;
}
.box2 img {
  width: 70%;
}

@media screen and (max-width: 908px) {
  .bigcontainer > div {
    width: 100%;
    height: max-content;
    flex: 0 0 100%;
  }
  .bigcontainer {
    display: flex;
    flex-wrap: wrap;
    width: 98vw;
    align-items: center;
    margin: 20px;
    font-family: "sans";
    padding: 15;
    margin-left: 0;
    margin-top: 150px;
  }
  .text-container {
    width: auto;
    margin-bottom: auto;
  }
  .testing {
    width: auto;
    margin: auto;
  }
  .box2 {
    order: 4;
  }
  .box2 img {
    width: 100%;
    height: 100%;
  }

  .box3 {
    flex-wrap: wrap;
  }

  .box3 img {
    width: 100%;
  }
  .box2 img {
    width: 100%;
  }

  .bigcontainer::after {
    display: none;
  }
}
.box1 {
  font-family: "sans";
  line-height: 150%;
}
.box4 {
  font-family: "sans";
  line-height: 150%;
}
h3 {
  font-size: 18px;
  font-weight: bolder;
}
.box4 h3 {
  padding-left: 15px;
}
.imge-4 {
  width: 100px;
}
.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0; /* remove the gap so it doesn't close */
}
.text-container {
  width: 600px;
  margin-bottom: 90px;
}
.testing {
  width: 600px;
  margin-left: 20px;
}
@media screen and (max-width: 568px) {
  .bigcontainer > div {
    width: 100%;
    height: max-content;
    flex: 0 0 100%;
  }
  .bigcontainer {
    display: flex;
    flex-wrap: wrap;
    width: 98vw;
    align-items: center;
    margin: 20px;
    font-family: "sans";
    padding: 15;
    margin-left: 0;
    margin-top: 150px;
  }
  .testing {
    width: auto;
    margin: auto;
  }
  .text-container {
    width: auto;
    margin-bottom: auto;
  }

  .box2 {
    order: 4;
  }
  .box2 img {
    width: 100%;
    height: 100%;
  }

  .box3 {
    flex-wrap: wrap;
  }

  .box3 img {
    width: 100%;
  }
  .box2 img {
    width: 100%;
  }

  .bigcontainer::after {
    display: none;
  }
}

css 我如何给flex-container添加页脚？

1条答案

相关问题

热门标签

最新问答