Как я могу расположить надписи и надписи рядом при изменении размера? - PullRequest
Новая
       25

Как я могу расположить надписи и надписи рядом при изменении размера?

0 голосов
/ 18 декабря 2018

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

В настоящее время это выглядит только в полноэкранном режиме;С: [01.01.2010] С: [18/12/2018]

При втором изменении размера экрана он выглядит следующим образом

С: [01.01.2010] До:
[18/12/2018]

Если размер экрана изменяется не на весь экран, он должен выглядеть следующим образом и оставаться там до наименьшего размера экрана.

От: [01/01/2010]
Кому: [18/12/2018]

Я знаю, что с сеточной системой она основана на большом, среднем, маленьком, очень маленьком.Однако для меня все, кроме полноэкранного, является средним или низким. 

<div class="row">
        <div class="col">
            <label for="fromUploadDate text-muted">From:</label>
        </div>
        <div class="col">
            <kendo-datepicker></kendo-datepicker>
        </div>
        <div class="col">
            <label for="toUploadDate text-muted">To:</label>
        </div>
        <div class="col">
            <kendo-datepicker></kendo-datepicker>
        </div>
    </div>

1 Ответ

0 голосов
/ 18 декабря 2018

Это должно помочь вам.Вам просто нужно добавить немного в конец col, используя один из вариантов из официальных документов Bootstraps.И clearfix должен разбить все на 2 строки.Например: 

<div class="row">
 <div class="col-2">
  <label for="fromUploadDate text-muted">From:</label>
 </div>
 <div class="col-2">
  <kendo-datepicker></kendo-datepicker>
 </div>
 <div class="clearfix"></div>
 <div class="col-2">
  <label for="toUploadDate text-muted">To:</label>
 </div>
 <div class="col-2">
  <kendo-datepicker></kendo-datepicker>
 </div>
</div>

Редактировать: 2018-12-20 

<div class="container">
 <div class="row col-sm-7">
  <div class="col">
   <label for="fromUploadDate text-muted">From:</label>
  </div>
  <div class="col">
   <kendo-datepicker></kendo-datepicker>
  </div>
 </div>
 <div class="row col-sm-7">
  <div class="col">
   <label for="toUploadDate text-muted">To:</label>
  </div>
  <div class="col">
   <kendo-datepicker></kendo-datepicker>
  </div>
 </div>
</div>
...