经典布局实现-bootstrap 栅格系统

by lai chendong

HTML

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
<nav class="navbar"></nav>
<div class="container">
  <div class="row">
    <nav class="sidebar col-3">
      <section></section>
    </nav>
    <main class="main col-9">
      <section></section>
    </main>
  </div>
  <div class="row">
    <footer class="col-12">
      <section></section>
    </footer>
  </div>
</div>

CSS

.navbar,  section{
  background:#ccc;
  margin-bottom:20px;
}
.navbar{
  height:80px;
}
.sidebar section{
  height:300px;
}
.main section{
  height:600px;
}
footer section{
  height:50px;
}