Question

我试图用BS4制作网格布局。

这就是现在的样子： My grid-layout

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

我遇到的问题是我的侧边栏与主要内容在同一个地方开始。我希望它从导航栏开始。我知道如果你将导航栏和主要内容嵌入到同一列中，你可以做到这一点，但我不想这样做，因为我要将导航栏变为部分。

HTML：

df
           name  year type
0  Carlos - xyz  2019  big
1  Marcos - yws  2031     
3    Fran - xxz  2431  big
4    Matt - yre  1985

CSS：

<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>

JSfiddle link

Answer 1

您应该尝试将navbar和main-content放在一列中，将第二列放在侧栏中来对列进行分组。

 <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

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

1 个答案: