Блог

Главная - Вопросы по программированию - Адаптивная дата от даты к макету css

Адаптивная дата от даты к макету css

#html #css #twitter-bootstrap

#HTML #css #twitter-bootstrap

Вопрос:

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

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

Я уже собрал (с благословения 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>

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

 label from
input
label to
input

Ответ №1:

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

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

Комментарии:

1. Почти. На большом экране надписи не должны создавать новую строку.

2. в больших — все компоненты в одной строке. на мобильных устройствах — каждый компонент в виде новой строки (это уже работает нормально)

3. Хорошо, скоро вы получите обновленный код. Я дам вам знать

4. Спасибо за попытку, но все еще нет. Я имею в виду, что сейчас это занимает 1 строку, но посмотрите на это во весь экран. Входные данные date имеют ширину 500 пикселей, это выглядит действительно плохо. Вот почему я боролся с перемещением ее в центр. Потому что datepicker в большом разрешении должен быть маленьким и располагаться по центру. Вы можете, например, изменить ширину первой строки стилей с 85% на 25%, а затем вы увидели, что необходимо добавить плавающий ввод по центру на больших экранах

5. @user2771738 проблема: ширина страницы sm-12 на 100% ниже экрана 992px. Так что вы не можете это проверить. Возможно, это будет ответ, который вы ищете. КОД ОБНОВЛЕН

Ответ №2:

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

Ответ №3:

Я нашел хорошее решение, используя 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>