css - 在 React 应用程序中使用引导程序根据指定高度显示列的网格

Question

我正在动态显示一个大型菜单，为此我想根据要求创建一个网格。这里有几点需要考虑：

1. 我想在列中显示数据，如果数据增加，额外的列会自动添加。
2. 超级菜单的高度将被固定，例如 300 像素，并且将根据超级菜单高度和列内容添加列数据。（如果没有那么多空间可用，那么该 div 将自动创建另一列）
3. 一列可能包含多个小尺寸列。
4. 数据将使用 json 自动显示在列中。

我尝试了引导程序的行列结构，但是数据按行水平显示，我希望数据按列垂直显示。

我正在使用数组上的 .map 动态创建这样的结构

<div className="row">
  <div className="col-md-4"></div>
  <div className="col-md-4"></div>
  <div className="col-md-4"></div>
  <div className="col-md-4"></div>
  <div className="col-md-4"></div>
  <div className="col-md-4"></div>
  <div className="col-md-4"></div>
</div>

更多细节：

标签： cssreactjsbootstrap-4

Answer 1

首先，引导程序希望您将布局分成 12 列。您当前的 DOM 使用 28 列 (4 * 7)。它在 UI 中的行为可能会很奇怪。

您只需要像引导程序那样考虑行和列。这是一个尝试模仿您的屏幕截图的示例结构。您需要根据自己的需要进行更改col-md-*。

div {
  background: lightblue;
  border: 1px solid;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col">1</div>
    <div class="col">2
      <div class="row">1</div>
      <div class="row">2</div>
      <div class="row">3</div>
    </div>
    <div class="col">
      3
      <div class="row">1</div>
      <div class="row">2</div>
      <div class="row">3</div>
      <div class="row">4</div>
    </div>
  </div>
</div>