提问者:小点点

如何使用Bootstrap 4使输入时间响应


我正在做laravel项目,我需要使这个表单响应,我添加了这个,但是没有改变任何建议? 谢谢你

表格如下:

  <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>


共1个答案

匿名用户

我认为您需要使用特定的col数字和断点来使代码具有响应性。 在主列中添加了COL-SM-4 COL-12。 这意味着这个块将是4/12的宽度,直到小(576px)引导宽度。 然后它会有12/12的宽度。 有关bootstrap断点的更多信息anscols here https://getbootstrap.com/docs/4.0/layout/grid/

虽然已将class=“Form-Control”添加到输入中。 现在他们也有反应了

null

<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>