Bootstrap align-items не работает должным образом

Question

Я пытаюсь создать простую веб-страницу с верхним и нижним колонтитулом, используя bootstrap 4, проблема в том, что нижний колонтитул не будет отображаться в конце страницы. вот мой HTML, пожалуйста, кто-нибудь может сказать мне, что делать.

html, body {
    height: 100%;
}

.appbox {
    border-left: #000000 solid 2px;
    border-right: #000000 solid 2px;
    height: 100%;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>    
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src='main.js'></script>

<div class="container appbox">
    <div class="row align-items-start">
       <div class="col-12 text-center ">
         <h3>Header</h3>
       </div>
    </div>
        
    <div class="row align-items-end">
       <div class="col-12 text-center">
         <h3>Footer</h3>
       </div>
    </div>
</div>

Answer 1

Вы используете классы начальной загрузки неправильно. Во-первых, у вас appbox нет height:100%, и align-items-* следует использовать с гибким контейнером для выравнивания элементов внутри, а не с элементом, который вы хотите выровнять.

Вы можете исправить свой код, как показано ниже, без добавления каких-либо внешних CSS (https://getbootstrap.com/docs/4.2/utilities/flex/)

html,
body {
  height: 100%;
}

.appbox {
  border-left: #000000 solid 2px;
  border-right: #000000 solid 2px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<!-- you make this 100% height and a flex container with colmun direction -->
<div class="container appbox h-100 d-flex flex-column">
  <div class="row">
    <div class="col-12 text-center ">
      <h3>Header</h3>
    </div>
  </div>
 <!-- you use margin-top:auto to push footer at the bottom -->
  <div class="row mt-auto">
    <div class="col-12 text-center">
      <h3>Footer</h3>
    </div>
  </div>
</div>

Answer 2

Надеюсь, это поможет .. спасибо

html, body {
    height: 100%;
}

.appbox {
    border-left: #000000 solid 2px;
    border-right: #000000 solid 2px;
    height: 100%;
}

.footer{
  position:absolute;
  bottom:0;
  right:0;
  left:0;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
        <script src='main.js'></script>

<div class="container appbox">
  <div class="row align-items-start">
    <div class="col-12 text-center ">
      <h3>Header</h3>
    </div>
  </div>

  <div class="row align-items-end footer">
    <div class="col-12 text-center">
      <h3>Footer</h3>
    </div>
  </div>
</div>

Answer 3

Пожалуйста, попробуйте:

html, body {
    height: 100%;
}

.appbox {
    display: flex;
    flex-wrap: wrap;
    border-left: #000000 solid 2px;
    border-right: #000000 solid 2px;
    min-height: 100vh;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
        <script src='main.js'></script>

 <div class="container appbox">
  <div class="row align-items-start w-100">
    <div class="col-12 text-center ">
      <h3>Header</h3>
    </div>
  </div>
        
  <div class="row align-items-end w-100">
    <div class="col-12 text-center">
      <h3>Footer</h3>
    </div>
  </div>
 </div>

Answer 4

Вы ищете такой вид?тогда, пожалуйста, проверьте

html, body {
            height: 100%;
        }
        footer {
            color: #666;
            background: #222;
            padding: 17px 0 18px 0;
            border-top: 1px solid #000;
        }
        footer a {
            color: #999;
        }
        footer a:hover {
            color: #efefef;
        }
        .wrapper {
            min-height: 100%;
            height: auto !important;
            height: 100%;
            margin: 0 auto -63px;
        }
        .push {
            height: 63px;
        }
        /* not required for sticky footer; just pushes hero down a bit */
        .wrapper > .container {
            padding-top: 60px;
        }

 
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
        <script src='main.js'></script>
        <div class="container appbox">
    <div class="row align-items-start">
       <div class="col-12 text-center ">
         <h3>Header</h3>
                </div>
    </div>
 <div class="wrapper">
      <div class="container">
        <header class="hero-unit">
          <h1>Header</h1>
          <p>It's really <strong>not</strong> that hard, y&rsquo;know. Check out the source code and <abbr title="Cascading Style Sheets">CSS</abbr> of this web page for how to do it yourself.</p>
        </header>
      </div>
      <div class="push"><!--//--></div>
    </div>
    <footer>
      <div class="container">
        <p>Put together in less than five minutes by <a href="http://www.martinbean.co.uk/" rel="author">Martin Bean</a>. Uses <a href="http://twitter.github.com/bootstrap/" rel="external">Twitter Bootstrap</a> and <a href="http://ryanfait.com/sticky-footer/" rel="external">Ryan Fait&rsquo;s Sticky Footer</a>.</p>
      </div>
    </footer>