отзывчивая дата с даты на раскладку css

Интересно, что лучше всего подходит для получения даты с даты в layot. Так оно и должно быть что-то вроде:отзывчивая дата с даты на раскладку css

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

Я уже строить (с благословением начальной загрузки):

<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>

и что почти соответствует моим потребностям, кроме того, что на мобильных поплавках уничтожить весь макет. Я думаю, что эти плавающие дивы должны иметь некоторые, как динамическое поплавка зависит от разрешения или лучшее решение, чтобы сделать на небольшой размер ширина 100% как для диапазона и ввода для создания макета Moblie как:

label from 
input 
label to 
input

источник

2016-10-24 user2771738

Я нашел красивое решение с использованием 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>

источник

2016-10-27 09:46:36 user2771738

Если я правильно понимаю, вы не нужно использовать поплавки вообще. Bootstrap автоматически позаботится о выравнивании вашего <div> s. Просто измените порядок ваших двух полей ввода; первый из них будет слева.

источник

2016-10-24 22:08:47 Kai

Если у вас уже есть этот. Если у вас есть какие-либо вопросы относительно этого. спросите меня в комментарии. Если я ошибаюсь. Прошу прокомментировать ниже. Я постараюсь изо всех сил решить вашу проблему. Удачи.

$(document).ready(function() { 
 
     $('.pickyDate').datepicker({ 
 
      format: "dd/mm/yyyy" 
 
     }); 
 
    });

.right{float:right !important;} 
 
.col-sm-12{width:50% !important;} 
 
@media only screen and (max-width:768px) { 
 
    .col-sm-12{width:100% !important;} 
 
.right{float:none !important;} 
 
input.pickyDate{width:100%;} 
 
    /*Usefull class*/ 
 
    .topMar { 
 
    margin-top: 20px; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 

 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
    
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script> 
 

 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> 
 

 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" /> 
 
</head> 
 
<body> 
 
<div class="container-fluid"> 
 
<div class="row"> 
 
    <div class="col-md-6 col-sm-12"> 
 
    <div class="right"> 
 
     <span class="lable">date from</span> 
 
     <input type="text" placeholder="click to show datepicker" class="pickyDate" /> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-6 col-sm-12 topMar"> 
 
    
 
     <span class="lable">date to</span> 
 
     <input type="text" placeholder="click to show datepicker" class="pickyDate" /> 
 
    
 
    </div> 
 
</div> 
 
</div> 
 
</body>

источник

2016-10-24 23:10:54

Почти. На ярлыках большого экрана не следует создавать новую строку. – user2771738

Упс .. так что хочешь вещь на большом экране ??? –

на большом - все компоненты в одной строке. на мобильном устройстве - каждый компонент, как новая строка (это уже работает нормально) – user2771738

отзывчивая дата с даты на раскладку css

ответ

Смежные вопросы