问题:
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>
回答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 col
s here https://getbootstrap.com/docs/4.0/layout/grid/
Although added class="form-control"
to your input
s. 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>