Html 引导4如何水平放置标签和输入字段

我正在Bootstrap 4中设计表单，我需要满足以下几个要求：

1） 屏幕应分为两部分。（ID和年龄为一部分，姓名和学院为一部分。） 为了使其正常工作，我使用了

class=“container”

，是否正确

2） 标签和输入字段在大屏幕中应水平，但在屏幕变为中等屏幕时应垂直。 （现在我只能让它在中屏幕上保持垂直，但无法在大屏幕上保持水平。）

我的HTML：

    <h3 class="title text-center">Student Form</h3>


    <form [formGroup]="registerForm" #studentForm="ngForm">
      <div class="container">
        <div class="form-group">
          <div class="col-lg-12">
            <div class="row">
              <div class=" col-md-12 col-lg-6">
                <label class="col-form-label ">ID:</label>

                <input #SID [(ngModel)]="student.id" formControlName="ID" type="number"
                  class="form-control form-control-sm" />
              </div>

              <div class="col-md-12 col-lg-6 ">
                <label class="col-form-label">Name:</label>

                <input #SName [(ngModel)]="student.name" formControlName="name" type="text"
                  class="form-control form-control-sm" />

              </div>
            </div>
          </div>
        </div>
      </div>


      <div class="container">
        <div class="row">
          <div class="col-lg-6 col-md-12">
            <label class="  ">Age:</label>

            <input #SAge [(ngModel)]="student.age" formControlName="age" type="number"
              class="form-control form-control-sm" />
          </div>


          <div class=" col-lg-6 col-md-12">
            <label class="col-form-label ">College:</label>

            <select #SCollege class="form-control form-control-sm" formControlName="college" [(ngModel)]="student.college">
              <option value="Harvard">Harvard</option>
              <option value="INTI">INTI</option>
              <option value="Sunway">Sunway</option>
            </select>
          </div>
        </div>



    

学生表格
身份证件：
姓名：
年龄：
学院：
哈佛
因蒂
圣伊美

[[这是大屏幕的表单]

---

[]这是媒体屏幕中的表单]

它在bootstrap官方文档中

电子邮件
密码

它在bootstrap官方文档中

电子邮件
密码

只需添加class

class=“form inline”

表单内标签。

只需添加class

class=“form inline”

表单内标签