我正在做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>
我认为您需要使用特定的col
数字和断点来使代码具有响应性。 在主列中添加了COL-SM-4 COL-12
。 这意味着这个块将是4/12的宽度,直到小(576px)引导宽度。 然后它会有12/12的宽度。 有关bootstrap断点的更多信息anscol
s 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>