Как сделать так, чтобы моя форма была адаптивной на всех устройствах

Question

Я делаю регистрационную форму с помощью начальной загрузки 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>

Суффикс: Должность:

  </div></p>

Я должен был реагировать на все размеры

Answer 1

Измените свой код на:

   <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 https://getbootstrap.com/docs/4.0/layout/grid/