[英]How to make HTML form input fields responsive without using Bootstrap
[英]How to make input time responsive using Bootstrap 4
我正在研究 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>
我认为您需要使用特定的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.