Bootstrap 5布局表格网格

Bootstrap 5 Layout Form Grid用于使用网格类创建一个复杂的表单。表单网格布局需要不同宽度和排列的多列。为了创建一个表单网格，我们使用了.row和.col类。

表格网格布局使用的类：

.row。该类用于创建一个表格布局的行。
.col:该类用于创建表格网格的列。
.col-\*:该类用于创建表格网格的不同尺寸的列。

语法:

<div class="row">
      <div class="col">
        <input type="*" class="form-control" 
            ...>
      </div>
      ...
</div>

例子1：在这个例子中，我们将使用.row和.col类创建一个表单网格布局。

<!DOCTYPE html>
<html>
  
<head>
    <title>Bootstrap 5 Layout Form grid</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous">
    </script>
</head>
  
<body>
    <div class="container text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
  
        <h2>Bootstrap 5 Layout Form Grid</h2>
  
        <div class="row">
            <div class="col">
                <input type="text" class="form-control"
                    placeholder="First Name">
            </div>
            <div class="col">
                <input type="text" class="form-control"
                    placeholder="Last Name">
            </div>
            <div class="col">
                <input type="email" class="form-control"
                    placeholder="Email Id">
            </div>
        </div>
    </div>
</body>
  
</html>

输出:

Bootstrap 5布局表格网格

例子2：在这个例子中，我们将使用.row和.col-*类创建不同尺寸的表格网格布局。

<!DOCTYPE html>
<html>
  
<head>
    <title>Bootstrap 5 Layout Form grid</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous">
    </script>
</head>
  
<body>
    <div class="container text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
  
        <h2>Bootstrap 5 Layout Form Grid</h2>
  
        <div class="row">
            <div class="col-5">
                <input type="text" class="form-control"
                    placeholder="Name">
            </div>
            <div class="col-4">
                <input type="email" class="form-control"
                    placeholder="Email Id">
            </div>
            <div class="col-3">
                <input type="number" class="form-control"
                    placeholder="Mobile">
            </div>
        </div>
    </div>
</body>
  
</html>

输出:

Bootstrap 5布局表格网格