如何使用 bootstrap col 类创建不相等的列答案

【问题标题】：How to create unequal columns using bootstrap col class如何使用 bootstrap col 类创建不相等的列
【发布时间】：2021-02-14 10:13:19
【问题描述】：

我被分配使用 3 种方法制作以下布局。

使用 Div 的
使用 Bootstrap 的 CSS 网格系统
使用 Bootstrap 的 Row 和 Col 类

这是演示布局：

我使用 Div 和 CSS 网格系统进行了布局，但我无法使用引导程序的 row 和 col 类设计主要内容和侧边栏，因为它不允许制作不相等的列。

有没有办法使用引导程序的 Col & Row 类来实现这一点？

【问题讨论】：

标签： html css row col

【解决方案1】：

您可以使用引导程序类来创建不相等的列

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<div class="row">
  <div class="col-12" style="background-color:orange;">12/12</div>
  <div class="col-12" style="background-color:gray;">12/12</div>
  <div class="col-9" style="background-color:wheat;">9/12</div>
  <div class="col-3" style="background-color:aliceblue;">3/12</div>
</div>

【讨论】：

但 CSS 不是网格吗？
CSS 网格系统与 Bootstrap 网格系统不同

【解决方案2】：

Bootstrap 将一个页面分为 12 个部分

您可以将section分成<div class="container"><div>，然后在里面分成<div class="row"><div>，然后可以通过<div class="col-[SCREEN_SIZE]-[NUMBER_OF_SECTIONS]"><div>修改行。

对于 SCREEN_SIZE，请查看：https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

NUMBER_OF_SECTIONS：1-12

【讨论】：

你也可以忽略 SCREEN_SIZE 组件，只写一个例子：col-12