Question

我希望获得一个页脚，该页脚始终位于页面的底部。我正在使用弹性盒来获得这种效果的基础知识，但是我似乎无法按照我想要的方式对齐元素。感谢您的帮助。

我仍然是一名学生，并且在Web开发方面比设计要好得多。但是，如果我要去任何地方，都必须掌握两者。我正在做这个项目，作为投资组合的一部分，并且是为了实践。

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1 0 auto;
}

.footer {
  background-color: black;
}

<html>

<head></head>

<body>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis massa justo, eget elementum orci efficitur sit amet. Sed eget iaculis odio. Aenean aliquet elit tellus, id luctus ex efficitur in. Quisque eu eros dui. Sed a arcu in leo hendrerit
    convallis vel sit amet purus. Aenean ac libero non nisl dapibus faucibus vel id elit. Suspendisse sed dictum erat, non posuere risus. Nulla fermentum, neque a vehicula sodales, massa arcu sagittis nunc, vel euismod lorem libero a elit. In auctor vehicula
    porta. Morbi vitae tristique enim. Phasellus at elit scelerisque, dignissim odio vitae, fermentum tellus. Maecenas pretium mollis metus non hendrerit. Ut mollis elementum lorem et semper. Nam ornare, mauris id maximus semper, mi lorem interdum risus,
    mollis rutrum ex mi pharetra tellus. Ut vitae mattis lacus, vitae scelerisque enim. Maecenas dictum quis nisl vitae condimentum. Pellentesque pulvinar sem nec risus dignissim, sed egestas libero mollis. Maecenas iaculis suscipit justo, vel rutrum
    leo auctor in. Integer condimentum purus in placerat viverra. Ut euismod enim ut erat aliquet feugiat ac vel ante. Pellentesque mollis diam lacinia augue maximus, iaculis congue nisl dapibus. Integer consectetur nibh sapien. Cras at risus lorem. Suspendisse
    venenatis eleifend erat quis fringilla. Aliquam gravida lacus et leo tempor porttitor. Aliquam placerat felis laoreet condimentum viverra. Nulla at bibendum est. Nunc mattis pharetra nunc vitae interdum. Maecenas suscipit molestie vehicula. Nulla
    sed diam pretium, lacinia leo tincidunt, porttitor nulla. Ut nec massa imperdiet, maximus turpis vel, posuere nisi. Mauris ut purus purus. Mauris rhoncus diam sit amet imperdiet volutpat. Cras vitae risus sem. Aenean sed mi eget lorem laoreet pretium
    sit amet non turpis. Nulla vel maximus tortor. Nunc auctor diam laoreet pulvinar posuere. Mauris nec lectus eget massa tincidunt tempus. Etiam viverra justo diam, a vulputate lectus efficitur et. Suspendisse tellus justo, bibendum at vehicula id,
    bibendum id nisl. Donec dictum ex ac orci accumsan sollicitudin. Phasellus aliquet lorem non egestas facilisis. Ut vehicula et augue vitae tempus. Integer pellentesque sed nulla in pharetra. In scelerisque ex vel ipsum congue posuere. Donec accumsan
    finibus eleifend. Donec leo ipsum, placerat id faucibus ut, commodo eget purus. Sed tellus massa, vehicula in sem at, bibendum tristique sem. Mauris vulputate ligula at tortor vestibulum consectetur. Cras ultricies tortor lorem, id congue arcu pretium
    eget. In velit erat, luctus a neque et, placerat elementum nunc. Nulla a mauris tempus, blandit ante at, condimentum libero.
  </div>
  <footer class="footer">
    <!-- Footer Links -->
    <div class="container text-center text-md-left">

      <!-- Grid row -->
      <div class="row">

        <!-- Grid column -->
        <div class="col-md-3 mx-auto">

          <!-- Links -->
          <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

          <ul class="list-unstyled">
            <li>
              <a href="#!">Very long link 1</a>
            </li>
            <li>
              <a href="#!">Very long link 2</a>
            </li>
            <li>
              <a href="#!">Very long link 3</a>
            </li>
            <li>
              <a href="#!">Very long link 4</a>
            </li>
          </ul>

        </div>
        <!-- Grid column -->

        <hr class="clearfix w-100 d-md-none">

        <!-- Grid column -->
        <div class="col-md-3 mx-auto">

          <!-- Links -->
          <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

          <ul class="list-unstyled">
            <li>
              <a href="#!">Link 1</a>
            </li>
            <li>
              <a href="#!">Link 2</a>
            </li>
            <li>
              <a href="#!">Link 3</a>
            </li>
            <li>
              <a href="#!">Link 4</a>
            </li>
          </ul>

        </div>
        <!-- Grid column -->

        <hr class="clearfix w-100 d-md-none">

        <!-- Grid column -->
        <div class="col-md-3 mx-auto">

          <!-- Links -->
          <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

          <ul class="list-unstyled">
            <li>
              <a href="#!">Link 1</a>
            </li>
            <li>
              <a href="#!">Link 2</a>
            </li>
            <li>
              <a href="#!">Link 3</a>
            </li>
            <li>
              <a href="#!">Link 4</a>
            </li>
          </ul>

        </div>
        <!-- Grid column -->

        <hr class="clearfix w-100 d-md-none">

        <!-- Grid column -->
        <div class="col-md-3 mx-auto">

          <!-- Links -->
          <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

          <ul class="list-unstyled">
            <li>
              <a href="#!">Link 1</a>
            </li>
            <li>
              <a href="#!">Link 2</a>
            </li>
            <li>
              <a href="#!">Link 3</a>
            </li>
            <li>
              <a href="#!">Link 4</a>
            </li>
          </ul>

        </div>
        <!-- Grid column -->

      </div>
      <!-- Grid row -->

    </div>
    <!-- Footer Links -->

    <!-- Copyright -->
    <div class="footer-copyright text-center py-3">© 2018 Copyright:
      <a href="https://mdbootstrap.com/education/bootstrap/"> MDBootstrap.com</a>
    </div>
    <!-- Copyright -->
  </footer>
</body>

</html>

我期望的是页脚将停留在页面底部。它可以这样做，但是.footer部分仍以列格式进行布局。我知道这是由于其父级设置为此而引起的。但是，鉴于我正在使用弹性盒，我不确定如何使它完成我想做的事情。

Answer 1

Flexbox规则不会被继承，它们只会影响容器本身，只有其直接后代才能成为flex-items。您看到的堆叠是因为div容器和hr元素是块元素，默认情况下采用全宽。

您的标记很好，可以在添加引导程序后（在全屏模式下使用）。您可以参考documentation或参考资料以获取更多详细信息，但作为概述，以防万一您想在没有引导程序的情况下滚动自己的版本：

row创建一个伸缩容器。等效于display: flex;。
col-x创建一个宽度为12的x列。对于您而言，col-3等效于width: 25%;（或使用flex-basis: 25%;来保持弹性框样式）
-md-，-xs-仅适用于特定的断点。

只需添加几个规则即可解决您的问题。请注意，.row设置了display: flex;，但没有flex-direction，并且仍在行中流动。如果您删除了display，则由于hr元素的宽度为100%，并且div元素未浮动，因此链接仍然按列堆叠。

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1 0 auto;
}

.footer {
  background-color: black;
}

.col-md-3 {
  width: 25%;
}

.row {
  display: flex;
}

<html>


<head>
</head>

<body>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis massa justo, eget elementum orci efficitur sit amet. Sed eget iaculis odio. Aenean aliquet elit tellus, id luctus ex efficitur in. Quisque eu eros dui. Sed a arcu in leo hendrerit
    convallis vel sit amet purus. Aenean ac libero non nisl dapibus faucibus vel id elit. Suspendisse sed dictum erat, non posuere risus. Nulla fermentum, neque a vehicula sodales, massa arcu sagittis nunc, vel euismod lorem libero a elit. In auctor vehicula
    porta. Morbi vitae tristique enim. Phasellus at elit scelerisque, dignissim odio vitae, fermentum tellus. Maecenas pretium mollis metus non hendrerit. Ut mollis elementum lorem et semper. Nam ornare, mauris id maximus semper, mi lorem interdum risus,
    mollis rutrum ex mi pharetra tellus. Ut vitae mattis lacus, vitae scelerisque enim. Maecenas dictum quis nisl vitae condimentum. Pellentesque pulvinar sem nec risus dignissim, sed egestas libero mollis. Maecenas iaculis suscipit justo, vel rutrum
    leo auctor in. Integer condimentum purus in placerat viverra. Ut euismod enim ut erat aliquet feugiat ac vel ante. Pellentesque mollis diam lacinia augue maximus, iaculis congue nisl dapibus. Integer consectetur nibh sapien. Cras at risus lorem. Suspendisse
    venenatis eleifend erat quis fringilla. Aliquam gravida lacus et leo tempor porttitor. Aliquam placerat felis laoreet condimentum viverra. Nulla at bibendum est. Nunc mattis pharetra nunc vitae interdum. Maecenas suscipit molestie vehicula. Nulla
    sed diam pretium, lacinia leo tincidunt, porttitor nulla. Ut nec massa imperdiet, maximus turpis vel, posuere nisi. Mauris ut purus purus. Mauris rhoncus diam sit amet imperdiet volutpat. Cras vitae risus sem. Aenean sed mi eget lorem laoreet pretium
    sit amet non turpis. Nulla vel maximus tortor. Nunc auctor diam laoreet pulvinar posuere. Mauris nec lectus eget massa tincidunt tempus. Etiam viverra justo diam, a vulputate lectus efficitur et. Suspendisse tellus justo, bibendum at vehicula id,
    bibendum id nisl. Donec dictum ex ac orci accumsan sollicitudin. Phasellus aliquet lorem non egestas facilisis. Ut vehicula et augue vitae tempus. Integer pellentesque sed nulla in pharetra. In scelerisque ex vel ipsum congue posuere. Donec accumsan
    finibus eleifend. Donec leo ipsum, placerat id faucibus ut, commodo eget purus. Sed tellus massa, vehicula in sem at, bibendum tristique sem. Mauris vulputate ligula at tortor vestibulum consectetur. Cras ultricies tortor lorem, id congue arcu pretium
    eget. In velit erat, luctus a neque et, placerat elementum nunc. Nulla a mauris tempus, blandit ante at, condimentum libero.
  </div>
  <footer class="footer">
    <!-- Footer Links -->
    <div class="container text-center text-md-left">

      <!-- Grid row -->
      <div class="row">

        <!-- Grid column -->
        <div class="col-md-3 mx-auto">

          <!-- Links -->
          <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

          <ul class="list-unstyled">
            <li>
              <a href="#!">Very long link 1</a>
            </li>
            <li>
              <a href="#!">Very long link 2</a>
            </li>
            <li>
              <a href="#!">Very long link 3</a>
            </li>
            <li>
              <a href="#!">Very long link 4</a>
            </li>
          </ul>

        </div>
        <!-- Grid column -->

        <hr class="clearfix w-100 d-md-none">

        <!-- Grid column -->
        <div class="col-md-3 mx-auto">

          <!-- Links -->
          <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

          <ul class="list-unstyled">
            <li>
              <a href="#!">Link 1</a>
            </li>
            <li>
              <a href="#!">Link 2</a>
            </li>
            <li>
              <a href="#!">Link 3</a>
            </li>
            <li>
              <a href="#!">Link 4</a>
            </li>
          </ul>

        </div>
        <!-- Grid column -->

        <hr class="clearfix w-100 d-md-none">

        <!-- Grid column -->
        <div class="col-md-3 mx-auto">

          <!-- Links -->
          <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

          <ul class="list-unstyled">
            <li>
              <a href="#!">Link 1</a>
            </li>
            <li>
              <a href="#!">Link 2</a>
            </li>
            <li>
              <a href="#!">Link 3</a>
            </li>
            <li>
              <a href="#!">Link 4</a>
            </li>
          </ul>

        </div>
        <!-- Grid column -->

        <hr class="clearfix w-100 d-md-none">

        <!-- Grid column -->
        <div class="col-md-3 mx-auto">

          <!-- Links -->
          <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

          <ul class="list-unstyled">
            <li>
              <a href="#!">Link 1</a>
            </li>
            <li>
              <a href="#!">Link 2</a>
            </li>
            <li>
              <a href="#!">Link 3</a>
            </li>
            <li>
              <a href="#!">Link 4</a>
            </li>
          </ul>

        </div>
        <!-- Grid column -->

      </div>
      <!-- Grid row -->

    </div>
    <!-- Footer Links -->

    <!-- Copyright -->
    <div class="footer-copyright text-center py-3">© 2018 Copyright:
      <a href="https://mdbootstrap.com/education/bootstrap/"> MDBootstrap.com</a>
    </div>
    <!-- Copyright -->
  </footer>
</body>

</html>

Answer 2

我不确定使用flexbox是放置页脚的最佳方法。

如果您尝试将页脚保持在视口的底部，这将起作用：

footer {
  position: fixed;
  bottom: 0;
}

如果您的意思是脚注停留在底部，请查看this article。

Answer 3

仅使用flexbox即可实现所需的功能，不需要所有的bootstrap类。

以下是我认为要查找的内容的非常简化的版本：

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1 0 auto;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.footer {
  background-color: grey;
  padding: 20px;
}

.footer__container {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}

footer a {
  color: white;
  text-decoration: none;
}

.footer__headings{
  color: white;
  text-align: center;
  font-size: 18px;
  margin: 0 0 10px 0;
}

.footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

<html>
<head></head>
<body>
  <main class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis massa justo, eget elementum orci efficitur sit amet. Sed eget iaculis odio. Aenean aliquet elit tellus, id luctus ex efficitur in. Quisque eu eros dui. Sed a arcu in leo hendrerit
    convallis vel sit amet purus. Aenean ac libero non nisl dapibus faucibus vel id elit. Suspendisse sed dictum erat, non posuere risus. Nulla fermentum, neque a vehicula sodales, massa arcu sagittis nunc, vel euismod lorem libero a elit. In auctor vehicula
    porta. Morbi vitae tristique enim. Phasellus at elit scelerisque, dignissim odio vitae, fermentum tellus. Maecenas pretium mollis metus non hendrerit. Ut mollis elementum lorem et semper. Nam ornare, mauris id maximus semper, mi lorem interdum risus,
    mollis rutrum ex mi pharetra tellus. Ut vitae mattis lacus, vitae scelerisque enim. Maecenas dictum quis nisl vitae condimentum. Pellentesque pulvinar sem nec risus dignissim, sed egestas libero mollis. Maecenas iaculis suscipit justo, vel rutrum
    leo auctor in. Integer condimentum purus in placerat viverra. Ut euismod enim ut erat aliquet feugiat ac vel ante. Pellentesque mollis diam lacinia augue maximus, iaculis congue nisl dapibus. Integer consectetur nibh sapien. Cras at risus lorem. Suspendisse
    venenatis eleifend erat quis fringilla. Aliquam gravida lacus et leo tempor porttitor. Aliquam placerat felis laoreet condimentum viverra. Nulla at bibendum est. Nunc mattis pharetra nunc vitae interdum. Maecenas suscipit molestie vehicula. Nulla
    sed diam pretium, lacinia leo tincidunt, porttitor nulla. Ut nec massa imperdiet, maximus turpis vel, posuere nisi. Mauris ut purus purus. Mauris rhoncus diam sit amet imperdiet volutpat. Cras vitae risus sem. Aenean sed mi eget lorem laoreet pretium
    sit amet non turpis. Nulla vel maximus tortor. Nunc auctor diam laoreet pulvinar posuere. Mauris nec lectus eget massa tincidunt tempus. Etiam viverra justo diam, a vulputate lectus efficitur et. Suspendisse tellus justo, bibendum at vehicula id,
    bibendum id nisl. Donec dictum ex ac orci accumsan sollicitudin. Phasellus aliquet lorem non egestas facilisis. Ut vehicula et augue vitae tempus. Integer pellentesque sed nulla in pharetra. In scelerisque ex vel ipsum congue posuere. Donec accumsan
    finibus eleifend. Donec leo ipsum, placerat id faucibus ut, commodo eget purus. Sed tellus massa, vehicula in sem at, bibendum tristique sem. Mauris vulputate ligula at tortor vestibulum consectetur. Cras ultricies tortor lorem, id congue arcu pretium
    eget. In velit erat, luctus a neque et, placerat elementum nunc. Nulla a mauris tempus, blandit ante at, condimentum libero.
  </main>
  <footer class="footer">
    <div class="footer__container">

        <ul class="footer__list">
          <li>
            <h5 class="footer__headings">Links 1</h5>  
          </li>            
          <li>
            <a href="#!">Very long link 1</a>
          </li>
          <li>
            <a href="#!">Very long link 2</a>
          </li>
          <li>
            <a href="#!">Very long link 3</a>
          </li>
          <li>
            <a href="#!">Very long link 4</a>
          </li>
        </ul>

        <ul class="footer__list">
          <li>
            <h5 class="footer__headings">Links 2</h5>  
          </li>
          <li>
            <a href="#!">Link 1</a>
          </li>
          <li>
            <a href="#!">Link 2</a>
          </li>
          <li>
            <a href="#!">Link 3</a>
          </li>
          <li>
            <a href="#!">Link 4</a>
          </li>
        </ul>

        <ul class="footer__list">
          <li>
            <h5 class="footer__headings">Links 3</h5>  
          </li>
          <li>
            <a href="#!">Link 1</a>
          </li>
          <li>
            <a href="#!">Link 2</a>
          </li>
          <li>
            <a href="#!">Link 3</a>
          </li>
          <li>
            <a href="#!">Link 4</a>
          </li>
        </ul>

        <ul class="footer__list">
          <li>
            <h5 class="footer__headings">Links 4</h5>  
          </li>
          <li>
            <a href="#!">Link 1</a>
          </li>
          <li>
            <a href="#!">Link 2</a>
          </li>
          <li>
            <a href="#!">Link 3</a>
          </li>
          <li>
            <a href="#!">Link 4</a>
          </li>
        </ul>
    </div>
  </footer>
</body>
</html>

或在Codepen https://codepen.io/davidysoards/pen/YogBGB?editors=1100

上

弹性框左对齐效果

3 个答案: