How to make input time responsive using Bootstrap 4

问题: i'm working on laravel project , i need to make this form responsive , i added this <meta name="viewport" content="width=device-width, initial-scale=1.0"> but nothing...

问题:

i'm working on laravel project , i need to make this form responsive , i added this <meta name="viewport" content="width=device-width, initial-scale=1.0"> but nothing change any suggestions ? and thank you

This is the form :

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

enter image description here


回答1:

I think you need to use specific col numbers and breakpoint to make you code responsive. Added col-sm-4 col-12 to your main columns. It means this block will be 4/12 of width until Small (576px) bootstrap width. And then it will we 12/12 width. More about bootstrap breakpoints ans cols here https://getbootstrap.com/docs/4.0/layout/grid/

Although added class="form-control" to your inputs. Now they are responsive too

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

  • 发表于 2020-06-27 21:48
  • 阅读 ( 131 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除