时间戳

首页 > 解决方案 > 使用 flexbox 将元素引导到底部

html - 使用 flexbox 将元素引导到底部

问题描述

我有一个片段，其中包含我的 section height 代码height: 450px;。请看片段：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
  .get-tour .form-block {
    display: inline-block;
  }

  .get-tour .form-block label {
    display: block;
  }
</style>

<section style="min-height: 450px">
  <div class="container">
    <div class="row">
      <div class="col-lg-8">
        Use the .flex-fill class on a series of sibling elements to force them into widths .... align-items , flex-direction: column , and margin-top: auto
      </div>
      <div class="col-lg-3">
        Use the .flex-fill class on a series of sibling elements to force them into widths .... align-items , flex-direction: column , and margin-top: auto
      </div>
    </div>
    <div class="element">

      <div class="get-tour d-flex align-items-end">
        <form action="">
          <div class="form-block">
            <label>When</label>
            <input type="text">
          </div>
          <div class="form-block">
            <label>Date </label>
            <input type="text">
          </div>
          <div class="form-block">
            <label>Qty ночей</label>
            <input type="text">
          </div>
          <div class="form-block">
            <label>Who</label>
            <input type="text">
          </div>
          <div class="form-block">
            <label>Type</label>
            <input type="text">
          </div>
          <div class="form-block">
            <button type="submit">Search</button>
          </div>
        </form>
      </div>

    </div>
  </div>
</section>

如何get-tour使用 flexbox 将表单置于底部？我尝试添加类d-flex align-items-end，但我的代码不起作用。为什么？如果我设置height: 100%为容器或在我的部分上也不起作用。请帮助解决此问题。谢谢。

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

如果我将 height: 100% 设置为容器或我的部分也不起作用。

您还需要将body和html的高度设置为 100%。因为它们包装了您的所有内容。

然后，您可以使用flexbox布局模型将您get-tour放在页面底部。

body,
html {
  height: 100%;
}

section {
  height: 100%;
}

section .container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
  .get-tour .form-block {
    display: inline-block;
  }
  
  .get-tour .form-block label {
    display: block;
  }
</style>

<section style="min-height: 450px">
  <div class="container">
    <div class="row">
      <div class="col-lg-8">
        Use the .flex-fill class on a series of sibling elements to force them into widths .... align-items , flex-direction: column , and margin-top: auto
      </div>
      <div class="col-lg-3">
        Use the .flex-fill class on a series of sibling elements to force them into widths .... align-items , flex-direction: column , and margin-top: auto
      </div>
    </div>
    <div class="element">

      <div class="get-tour ">
        <form action="">
          <div class="form-block">
            <label>When</label>
            <input type="text">
          </div>
          <div class="form-block">
            <label>Date </label>
            <input type="text">
          </div>
          <div class="form-block">
            <label>Qty ночей</label>
            <input type="text">
          </div>
          <div class="form-block">
            <label>Who</label>
            <input type="text">
          </div>
          <div class="form-block">
            <label>Type</label>
            <input type="text">
          </div>
          <div class="form-block">
            <button type="submit">Search</button>
          </div>
        </form>
      </div>

    </div>
  </div>
</section>

推荐阅读