Bootstrap 4 如何使我的表单在所有设备中都具有响应能力

我正在使用bootstrap 4制作登记表，但当我缩小屏幕尺寸时，并没有特别针对平板电脑尺寸做出响应

 <section class="row">
   <section class="col-md-6 col-sm-12 col-lg-6">
<form action="" class="form-inline" >
  <p>
  <div class="form-group">
    <!-- First name-->

    <label for="firstname"  class="mr-sm-2">First Name:</label>
    <input type="text" class="form-control mb-2 mr-sm-2" id="firstname"  name="firstname" placeholder="Enter Fist Name" required>
     <!-- middle name-->
    <label for="middle"  class="mr-sm-2">Middle:</label>
    <input type="text" class="form-control mb-2 mr-sm-2" id="middle"  name="middle" placeholder="Enter Middle Name" required>
    <!-- Last name-->
      <label for="last"  class="mr-sm-2">Last:</label>
     <input type="text" class="form-control mb-2 mr-sm-2" id="last"  name="last" placeholder="Enter Last Name" required>
  </div></p>

名字：
中间：
最后:

后缀： 职位名称：

我希望对所有尺寸都能做出响应

将您的代码更改为：

   <section class="row">
    <section class="col-sm-12">
      <form action="" class="form-inline">
        <div class="row">
          <div class="col-md-4">
            <div class="form-group">
              <!-- First name-->
              <label for="firstname" class="mr-sm-2">First Name:</label>
              <input
                type="text"
                class="form-control mb-2 mr-sm-2"
                id="firstname"
                name="firstname"
                placeholder="Enter Fist Name"
                required
              />
            </div>
          </div>
          <div class="col-md-4">
            <div class="form-group">
              <!-- middle name-->
              <label for="middle" class="mr-sm-2">Middle:</label>
              <input
                type="text"
                class="form-control mb-2 mr-sm-2"
                id="middle"
                name="middle"
                placeholder="Enter Middle Name"
                required
              />
            </div>
          </div>
          <div class="col-md-4">
            <div class="form-group">
              <!-- Last name-->
              <label for="last" class="mr-sm-2">Last:</label>
              <input
                type="text"
                class="form-control mb-2 mr-sm-2"
                id="last"
                name="last"
                placeholder="Enter Last Name"
                required
              />
            </div>
          </div>
        </div>
      </form>
    </section>
  </section>

名字：
中间：
最后:

您应该在bootstrap4中学习布局响应

---

非常感谢。它确实很有效，再次感谢您的建议。因为您还没有投票权，所以您将使用它。

   <section class="row">
    <section class="col-sm-12">
      <form action="" class="form-inline">
        <div class="row">
          <div class="col-md-4">
            <div class="form-group">
              <!-- First name-->
              <label for="firstname" class="mr-sm-2">First Name:</label>
              <input
                type="text"
                class="form-control mb-2 mr-sm-2"
                id="firstname"
                name="firstname"
                placeholder="Enter Fist Name"
                required
              />
            </div>
          </div>
          <div class="col-md-4">
            <div class="form-group">
              <!-- middle name-->
              <label for="middle" class="mr-sm-2">Middle:</label>
              <input
                type="text"
                class="form-control mb-2 mr-sm-2"
                id="middle"
                name="middle"
                placeholder="Enter Middle Name"
                required
              />
            </div>
          </div>
          <div class="col-md-4">
            <div class="form-group">
              <!-- Last name-->
              <label for="last" class="mr-sm-2">Last:</label>
              <input
                type="text"
                class="form-control mb-2 mr-sm-2"
                id="last"
                name="last"
                placeholder="Enter Last Name"
                required
              />
            </div>
          </div>
        </div>
      </form>
    </section>
  </section>