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

debugcn 发表于 Dev

扎克

我正在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，直到小（576px）引导宽度为止。然后它将达到12/12的宽度。更多关于自举断点ANScol这儿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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-04-2

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章

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

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

如何使用AngularFire在Firebase中输入时间？

如何使用Bootstrap 4使布局响应

用户如何在Text Field iOS中输入时间

使用Jquery datepicker时允许输入时间

使用Jquery datepicker时允许输入时间

需要使用 JavaScript 限制输入时间

如何使用NetBeans GUI在Java中输入时间（数据类型）

如何使用C程序关闭Windows，用户在其中输入时间

如何使用自定义输入时间创建Javascript时钟？

如何在python中将确切时间与输入时间进行比较

如何从javascript中的输入日期和输入时间获取整个Date对象

Angular不使用ui-router响应任何路由-输入时URL消失了

Angular不使用ui-router响应任何路由-URL只是在我输入时消失

如何使用Bootstrap日期时间控件

如何使用Bootstrap标签输入插件

如何在不输入时间的情况下从两个相同的日期读取

如何在PostgreSQL中将输入时间戳分组为访问者特定的“会话”？

使用setTimeout推迟进行数据输入时的时间密集型处理

如何使Bootstrap 4导航栏使用Flexbox

如何使用 bootstrap 4 重新排序元素？

如何设置一个条件，即当开始时间大于输入时间时，代码应执行

如何在不使用 Bootstrap 的情况下使 HTML 表单输入字段具有响应性

测量输入时间

如何使用Bootstrap使图像响应并在wordpress上使用它？

如何在启动时或响应用户输入时让服务器显示一些图像或电影？

如何更改输入时序？

使用 React 在输入时提交

如何使用ng2-bootstrap从Bootstrap 3切换到Bootstrap 4？

使用Twitter Bootstrap，如何使嵌入式视频响应？