解释 Bootstrap Grid 的基本结构

Bootstrap 网格是一个非常强大的工具，它使开发网站变得更加容易。它由 flexbox 制成，因此具有完全响应性，并且还根据设备宽度调整容器中的项目。容器是一个包装元素，用于包装网页上的所有其他项目和内容。 CSS 需要这个包装元素才能使网格正常工作。 .container 类是我们在代码中使用引导程序时通常使用的类，因为它还提供了一些附加选项，例如将对齐设置为中心和水平填充内容。

引导网格中有 12 列，尽管不必使用所有列，但总和不能超过 12。也可以根据喜好合并它们以形成更宽的列。

.row和.col类可用于分别创建和操作网格的行和列。

根据设备或浏览器的宽度，引导网格系统有以下五类——

适用于小型设备
- col：它的浏览器宽度小于 576px。
- col-sm：浏览器宽度等于或大于 576px。
适用于中型设备
- col-md：浏览器的宽度等于或大于 768px。
适用于大型和超大型设备
- col-lg：屏幕宽度等于或大于 992px。
- col-xl：屏幕宽度等于或大于 1200px

注意：这里的sm 、 md 、 lg和xl表示设备尺寸，即小、中、大和特大。

基本结构：

这将创建 2 个等宽的居中对齐的列。类容器包装了网格的所有行、列和内容。类 row 用于创建行，类 col-lg 表示设备宽度很大。

示例：创建 3 个等宽的等列。

HTML



  

    Three Equal columns
  
    

  

    
        GeeksforGeeks
    
  
    
        
            
                column-1 width-4
            
            
                column-2 width-4
            
            
                column-3 width-4

输出：

正如您在输出中看到的那样，在网页上创建了 3 列等宽的列，并且列宽根据浏览器的宽度进行调整，使其具有响应性。