html - 使用 flexbox Bootstrap 元素到底部

Question

我有一个片段，其中包含我的部分高度代码 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>

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

Answer 1

If I set height: 100% to container or on my section also not work.

您还需要将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>