请教大家一个问题，为什么水平表单换行后栅格不能对齐？ ...

水煮雪壁 · 发表于 2022-10-19 10:44:13

bootstrap 学习中，请教大家一个问题，为什么水平表单换行后栅格不能对齐？我的前一个ROW里面应该是够12格的，但是下一个ROW中就错开了，代码如下：
<!doctype html>
<html lang='zh-cn'>
<head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name='viewport' content='width=device-width,initial-scale=1'>
<link href='../boot/css/bootstrap.min.css' rel='stylesheet'>
<script src="../boot/js/jquery.min.js"></script>
<script src="../boot/js/bootstrap.min.js"></script>
<style>
.container{
border:1px blue solid;
}
</style>

  <title>2020年学生信息采集系统</title>
</head>
<body>

<div class='container'>
<p><h1 class='text-center'>2020年学生信息采集系统<small>--V1.0</small></h1></p>
<P><h4 class='text-center'>本次信息采集仅供我校使用</h4></P>
         <hr>
</div>

<div class='container'>
         <form class="for-horizontal">
            <div class="form-group">
                  <label for="schoolName" class="col-sm-2  label-warning control-label text-center">
                     <h5>学校名称：</h5>
                  </label>

                  <div class="col-sm-4">
                     <input id="schoolName" class="form-control" placeholder="请输入学校名称...">
                  </div>

                  <label for="classNo" class="col-sm-2 label-warning text-center">
                     <h5>班&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;级：</h5>
                  </label>

                  <div class="col-sm-4">
                     <input id="classNo" class="form-control" placeholder="请输入班级...例如：一年级1班">
                  </div>

            </div>

            <div class="form-group">
                  <label for="Pname" class="col-sm-2 label-warning control-label text-center">
                     <h5>家长姓名：</h5>
                  </label>
                  <div class="col-sm-4">
                     <input id="Pname" class="form-control" placeholder="家长姓名...">
                  </div>
                  <label for="Pphone" class="col-sm-2 text-center label-warning">
                     <h5>家长手机号：</h5>
                  </label>
            </div>
            <br>
            <br>
            <div class="form-group">
                  <div class="col-sm-10 col-sm-offset-1">
                     <button type="submit" class="btn btn-primary btn-block">
                        登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;记
                     </button>
                  </div>
            </div>

         </form>
</div>

</body>
</html>
展示如下：