html - 如何使列从容器顶部开始，而不依赖于其他列？

Question

我正在尝试使用 BS4 制作网格布局。

现在是这样的: My grid-layout

这就是我要实现的目标:grid-layout I want

我遇到的问题是我的侧边栏与主要内容在同一位置开始。我希望它与导航栏一起从顶部开始。我知道如果您将导航栏和主要内容嵌套到同一列中，您可以这样做，但我不想这样做，因为我要把导航栏变成一个部分。

HTML:

<div class="container">
 <div id="wrapper">
   <div class="row">

      <div id="navbar" class="col-md-8">
          Navbar
      </div>

      <div id="main" class="col-md-8">
          Main Content
      </div>

      <div id="sidebar" class="col-md-4">
          Sidebar
      </div>

  </div>
 </div>
</div>

CSS:

#wrapper{
  height: 200px;
  width: 400px;
}

#navbar{
  background-color: yellow;
  height: 50px;
}

#main{
  background-color: blue;
  height: 200px;
}

#sidebar{
  background-color: red;
}

JSfiddle link

Answer 1

您应该尝试通过将导航栏和主要内容放在一列中，将第二列用于侧边栏来对列进行分组。

 <div class="row">
  <div class="col-8 col-md-8">
    <div id="navbar" class="col-md-12">
      Navbar
    </div>
    <div id="main" class="col-md-12">
      Main Content
    </div>
  </div> 

  <div id="sidebar" class="col-4 col-md-4">
    Sidebar
  </div>

</div><--row-->

工作 fiddle