摆脱幸运百搭五个球

書名： Bootstrap 4：Responsive Web Design
作者名： Silvio Moreto Matt Lambert Benjamin Jakobus Jason Marah
本章字數： 140字
更新時間： 2021-07-09 18:54:47

Do a grid again

We have finally finished the navigation bar. Now it's time to the page main content. For that, we must create a page grid. Following how Twitter uses a three-column-based layout, we will do the same. The HTML code for the scaffolding is the one that should be placed after the <nav> element:

<div class="container">
  <div class="row">
    <div id="profile" class="col-md-3 hidden-sm hidden-xs"></div>
    <div id="main" class="col-sm-12 col-md-6"> </div>
    <div id="right-content" class="col-md-3 hidden-sm hidden-xs"> </div>
  </div>
</div>

To understand it, we just created a .container with a single .row. The .row contains three columns, the first and the last being visible only for medium and larger devices. This is because of the .hidden-sm and .hidden-xs classes. When both columns are hidden, the middle column fills the row completely. This is because of the .col-sm-12 class.

To finish that, add a padding-top to <body> in order to correct the page's position with respect to the navigation bar:

body {
  padding-top: 4em;
  background-color: #F5F8FA;
}

官术网_书友最值得收藏!

Bootstrap 4：Responsive Web Design

Do a grid again