css - 将 Bootstrap 4 div 分成两部分

Question

在我开始响应式设计之前，我正在尝试完成像素世界中简单的事情。我正在使用 bootstrap 4 并想要一个非常简单的布局。它由

组成

navbar
   main container-fluid div
      div using 85% of main div
      div using 15% of main div

我发现了很多示例来说明这是多么简单，但它对我不起作用。这是我的 html:

<div class="container-fluid h-100 d-flex flex-col" id="mainWindow" >

    <!-- div container for the map. -->
    <div class="row h-75" style="background-color: yellow;">
            map<br>
    </div>
    <div class="row h-25" style="background-color: green;">
            chat<br>
    </div>

</div> <!-- mainWindow -->

但我看到的是

navbar

没有黄色的div和一小块绿色的div

我错过了什么？

Answer 1

这是你想要的吗？？

html,
body {
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid d-flex h-100 flex-column">
  <div class="row h-75" style="background-color: yellow;">
    <div class="col-12">map</div>
  </div>
  <div class="row h-25" style="background-color: green;">
    <div class="col-12">chat</div>
  </div>
</div>