html - Bootstrap Flexbox 网格

问题描述

我正在尝试研究引导 flexbox，并且正在尝试完成此布局

所以我所做的就是d-flex flex-column在每个主 div 上添加。然而，它确实使它们都成为了 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-*属性来获得与下面完全相同的布局？

知道如何实现这一目标吗？

标签： htmlcsstwitter-bootstrapflexbox

html - Bootstrap Flexbox 网格

问题描述

解决方案

推荐阅读