Bootstrap Flexbox 网格

Question

我正在尝试研究 bootstrap flexbox，我正在尝试完成此布局

所以我所做的是在每个主 div 上添加了d-flex flex-column。但是它确实使它们都成为了 flexbox。

这是我的代码：

<div class="container wrap">
   <div class="row">
       <div class="col-md-22 mx-auto">
              <header class="bg-danger">
                  <navbar>
                     <ul>
                          <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>
                  </navbar>
              </header>
              <div class="main d-flex flex-column">
              <aside class="bg-info text-white p-2">                
              <h3>Sidebar</h3>
              <p>Ikuo iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
              </aside>
              <div class="bg-light flex-grow-2 p-2">
              <h3>Content</h3>

          </div>
           </div>
          <footer class="p-2">
             <p class="bg-secondary flex-grow-2 text-white">Text</p>
             <p class="bg-primary flex-grow-1 text-white">Text</p>
          </footer>
   </div>
</div>

我想知道如何使用flex-grow-* 属性来获得与下面完全相同的布局？

知道如何实现吗？

Answer 1

我猜你的页脚和导航缺少 d-flex 类。

这是更新后的代码：https://jsfiddle.net/9dbj5w6x/