从日期到 css 布局的响应日期 [英] Responsive date from date to css layout

查看：16
本文介绍了从日期到 css 布局的响应日期的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想知道从日期到日期获取日期的最佳方法是什么.所以它应该是这样的:

浮动中心为以下两行<日期标签><输入日期选择器><日期标签><输入日期选择器>//第1行<按钮>//第2行

我已经构建了(在引导程序的祝福下):

<div class="col-sm-12 col-md-6"><div class="float-right"><span>日期从</span><输入>

<div class="col-sm-12 col-md-6"><div class="float-left"><span>日期到</span><输入>

这几乎符合我的需求，除此之外，手机上的浮动会破坏整个布局.我认为那些浮动 div 应该有一些动态浮动如何取决于分辨率或更好的解决方案，使跨度和输入的小分辨率宽度均为 100% 以创建移动布局，例如:

标签来自输入标签到输入

解决方案

我找到了使用 botstrap css 的不错的解决方案

<div class="form-group"><label for="exampleInputEmail3">电子邮件地址</label><input type="email" class="form-control" id="exampleInputEmail3" placeholder="输入电子邮件">

<div class="form-group"><label for="exampleInputPassword3">密码</label><input type="password" class="form-control" id="exampleInputPassword3" placeholder="密码">

<div class="form-check"><label class="form-check-label"><input class="form-check-input" type="checkbox">记住账号

<button type="submit" class="btn btn-primary">登录</button></表单>

I wonder what is best approach to obtain date from date to layot. So it should be something like:

float center for below two lines
<label for date from><input datepicker> <label for date to><input datepicker>//line 1
<button>//line 2

I've build already(with blessing of bootstrap):

<div class="row">
    <div class="col-sm-12 col-md-6">
       <div class="float-right">
           <span>date from</span>
           <input>
       </div>
    </div>
    <div class="col-sm-12 col-md-6">
       <div class="float-left">
           <span>date to</span>
           <input>
       </div>
    </div>
</div>

and that almost fits my needs, beside that on mobiles floats destroy whole layout. I think that those float divs should have some how dynamic float depends on resolution or better solution to make on small resolution width 100% for both span and input to create moblie layout like:

label from
input
label to
input

解决方案

I found nice solution using botstrap css

<form class="form-inline text-center">
    <div class="form-group">
      <label for="exampleInputEmail3">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
    </div>
    <div class="form-group">
      <label for="exampleInputPassword3">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
    </div>
    <div class="form-check">
       <label class="form-check-label">
          <input class="form-check-input" type="checkbox"> Remember me
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
</form>

这篇关于从日期到 css 布局的响应日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆