Bootstrap 网格布局 - 如何将页面分成 3 个部分

Question

我想将 html 页面分成 3 个部分：第一个：包含文本，table ... 第二：这部分将包含用户提交的表单第三：包含超链接或类似的东西

我的代码如下：

<!DOCTYPE html>

<html lang="en">
    <head>
            <meta charset="UTF-8">
            <title>BOOTSTRAP</title>
            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
            <!-- JavaScript Bundle with Popper -->
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
            <!-- <style>
                .form {
                    margin: auto;
                    margin-top: 100px;
                    width: 300px;
                    padding: 20px;
                    border: 1px solid #DDD;
                    border-radius: 5px;
                    background-color: darkgray;
                }
                .form-label{
                    /* background-color: blue; */
                
                    color:aqua
                }
            </style> -->
    </head>
  <div class="container">
      <div class="row">
          <div class="col">
            1 of 3
          </div>
          <div class="col">
            <form action="" method="post">
                {% csrf_token %}
            <div class="form" style="width: 50%;">
        
                <h3 class="mt-3">Please input the info</h3>
        
                <div class="form-group mb-2">
                    <label class="form-label" >password:</label>
                    <input class="form-control" type="password" name = "password"/>
                </div>
                <div class="form-group mb-2 mt-2">
                    <label class="form-label">phone:</label>
                    <input class="form-control" type="text" name="phone"/>
                </div>
                <!-- <button style="width:100%" class="btn btn-primary btn-block mb-4 mt-3">submit</button> -->
                <button style="width:100%" class="btn btn-warning btn-block mb-4 mt-3">submit</button>
            </form>
          </div>
          <div class="col">
              3 of 3
          </div>
      </div>
  </div>

</html>

然而，它的布局不是我所期望的，我也附上了输出期望，你能帮忙吗？

Answer 1

你可以试试这个

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-md-4 border">
      1 of 1
    </div>
    <div class="col-xs-12 col-md-4 border">
      1 of 2
    </div>
    <div class="col-xs-12 col-md-4 border">
      1 of 3
    </div>
  </div>
</div>

Answer 2

给你...

您缺少 <div> 结束标记！
可选：将 col 更改为 col-md-4 col-12。
可选：您可以删除 style="width: 50%;"。
可选：添加d-flex justify-content- 类如果您希望第一张卡位于左侧，第二张位于中间，第三张位于右侧。

请参阅下面的代码段。

<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>BOOTSTRAP</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
  <!-- JavaScript Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
  <!-- <style>
    .form {
        margin: auto;
        margin-top: 100px;
        width: 300px;
        padding: 20px;
        border: 1px solid #DDD;
        border-radius: 5px;
        background-color: darkgray;
    }
    
    .form-label{
        /* background-color: blue; */
        color: aqua;
    }
   </style> -->
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-4 col-12 d-flex justify-content-md-start justify-content-center">
        1 of 3
      </div>
      <div class="col-md-4 col-12 d-flex justify-content-center">
        <form action="" method="post">
          {% csrf_token %}
          <div class="form">

            <h3 class="mt-3">Please input the info</h3>

            <div class="form-group mb-2">
              <label class="form-label">password:</label>
              <input class="form-control" type="password" name="password" />
            </div>
            <div class="form-group mb-2 mt-2">
              <label class="form-label">phone:</label>
              <input class="form-control" type="text" name="phone" />
            </div>
            <!-- <button style="width:100%" class="btn btn-primary btn-block mb-4 mt-3">submit</button> -->
            <button style="width:100%" class="btn btn-warning btn-block mb-4 mt-3">submit</button>
        </form>
        </div>
      </div>
      <div class="col-md-4 col-12 d-flex justify-content-md-end justify-content-center">
        3 of 3
      </div>
    </div>
  </div>
</body>

</html>

Bootstrap 网格布局 - 如何将页面分成 3 个部分

Bootstrap grid layout - how to split page into 3 devision

html

bootstrap-4