如何使用 Bootstrap 4 使輸入時間響應

Question

我正在研究 laravel 項目，我需要使此表單具有響應性，我添加了此<meta name="viewport" content="width=device-width, initial-scale=1.0">但沒有改變任何建議？ 謝謝你

這是表格：

  <section>
      <p>Gestion des horaires</p>
      <div class="row">
    <div class="col-4">
      <label>Lundi matin </label>
      <div class="row">
      <div class="col">
      <input type="time"  name="lun_mat1[]" /> 
      </div>
      <div class="col">
      <input type="time"  name="lun_mat1[]" />
      </div></div>
      </div>
      <div class="col-4">
      <label>Lundi après-midi </label>
      <div class="row">
      <div class="col">
      <input type="time"  name="lun_ap1[]" /> 
      </div>
      <div class="col">
      <input type="time"  name="lun_ap1[]" />
      </div>
      </div> </div>
      <div class="col-4">
      <input type="checkbox"  name="rememberMe"> Fermer
    </div>
    </div>
    </section>

Answer 1

我認為您需要使用特定的col號和斷點來使您的代碼響應。 col-sm-4 col-12添加到您的主要列中。 這意味着這個塊將是寬度的 4/12，直到Small (576px)引導寬度。 然后它將我們 12/12 寬度。 更多關於引導斷點和col的信息在這里https://getbootstrap.com/docs/4.0/layout/grid/

盡管將class="form-control"添加到您的input中。 現在他們也反應靈敏

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script> <section class="container-fluid"> <p>Gestion des horaires</p> <div class="row"> <div class="col-sm-4 col-12"> <label>Lundi matin </label> <div class="row"> <div class="col"> <input type="time" class="form-control" name="lun_mat1[]" /> </div> <div class="col"> <input type="time" class="form-control" name="lun_mat1[]" /> </div> </div> </div> <div class="col-sm-4 col-12"> <label>Lundi après-midi </label> <div class="row"> <div class="col"> <input type="time" class="form-control" name="lun_ap1[]" /> </div> <div class="col"> <input type="time" class="form-control" name="lun_ap1[]" /> </div> </div> </div> <div class="col-sm-4 col-12"> <input type="checkbox" name="rememberMe"> Fermer </div> </div> </section>