Bootstrap 5网格系统等宽

Bootstrap 5网格系统是一个强大的移动优先响应的flexbox网格，允许整个页面最多12列。你也可以将这些列组合在一起。

等宽的网格系统基本上是用来创建大小相等的网格的。在类的帮助下，我们将管理网格的宽度。

网格系统等宽使用类：

.row。该类用于创建行网格，并在父类中使用，以创建一个等宽的网格系统。
.col:这个类用于创建一个网格/列，这个类在.row类里面使用。

注意：你也可以使用bootstrap的另一个类，如border类来创建网格和文本颜色类的边界。

语法:

 <div class="row">
     <div class="col">
         ...
     </div>
     ...
 </div>

例子1：在这个例子中，我们将使用.row和.col类来创建两个等宽的网格。

<!DOCTYPE html>
<html>
  
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
</head>
  
<body>
    <div class="container">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
          
        <h3>Bootstrap5 Grid system Equal-width</h3>
  
        <div class="row">
            <div class="col border bg-danger">
                GFG Column 1
            </div>
            <div class="col border bg-secondary">
                GFG Column 2
            </div>
        </div>
    </div>
</body>
  
</html>

输出:

Bootstrap 5网格系统等宽

例子2：在这个例子中，我们将使用.row和.col类来创建不同的等宽的网格。

<!DOCTYPE html>
<html>
  
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
</head>
  
<body>
    <div class="container">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
  
        <h3>Bootstrap5 Grid system Equal-width</h3>
      
        <div class="row">
            <div class="col border bg-danger">
                GFG Column 1
            </div>
            <div class="col border bg-secondary">
                GFG Column 2
            </div>
        </div>
        <br><br>
  
        <div class="row">
            <div class="col border bg-primary">
                GFG Column 1
            </div>
            <div class="col border bg-warning">
                GFG Column 2
            </div>
            <div class="col border bg-info">
                GFG Column 3
            </div>
        </div>
        <br><br>
  
        <div class="row">
            <div class="col border bg-secondary">
                GFG Column 1
            </div>
            <div class="col border bg-success">
                GFG Column 2
            </div>
            <div class="col border bg-danger">
                GFG Column 3
            </div>
            <div class="col border bg-primary">
                GFG Column 4
            </div>
        </div>
        <br><br>
          
        <div class="row">
            <div class="col border bg-danger">
                GFG Column 1
            </div>
            <div class="col border bg-secondary">
                GFG Column 2
            </div>
            <div class="col border bg-primary">
                GFG Column 3
            </div>
            <div class="col border bg-info">
                GFG Column 4
            </div>
            <div class="col border bg-warning">
                GFG Column 5
            </div>
        </div>
    </div>
</body>
  
</html>

输出:

Bootstrap 5网格系统等宽