Как сделать этот элемент ввода отзывчивым для экранов с более низким разрешением? - PullRequest
Новая
       6

Как сделать этот элемент ввода отзывчивым для экранов с более низким разрешением?

0 голосов
/ 03 июля 2018

Вот HTML-код элемента ввода, который я пытаюсь сделать отзывчивым.

Я пытаюсь сделать ввод реагирующим для более низких разрешений экрана, таких как 1200 X 600. Вот CSS для этого HTML. 

.demo {
  position: relative;
  width: 100px;
}

.demo i {
  position: relative;
  bottom: 14px;
  right: 24px;
  top: auto;
  c cursor: pointer;
}
<div class="row" style="padding: 25px">
  <div class=" ">
    <p>Date Range</p>
  </div>
  <div class="col-lg-2 col-md-2 demo" style="top :-7px">
    <input type="text" class="form-control" style="cursor: pointer" name="daterange" value="01/01/2018 - 01/01/2050">
    <!-- <i class="glyphicon glyphicon-calendar fa fa-calendar"></i> -->
  </div>
</div>

1 Ответ

0 голосов
/ 03 июля 2018

Используйте col-2 вместо col-lg-2 col-md-2

Что означает, что это применимо ко всем размерам экрана (от xs до lg) 

.demo {
position: relative; 
width: 100px;
}

.demo i {
position: relative; 
bottom: 14px; 
right: 24px; 
top: auto; c
cursor: pointer;
}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="row" style="padding: 25px">
        <div>
            <p>Date Range</p>
        </div>
        <div class="col-2 demo" style="top :-7px">
            <input type="text" class="form-control" style="cursor: pointer" name="daterange" value="01/01/2018 - 01/01/2050">
            <!-- <i class="glyphicon glyphicon-calendar fa fa-calendar"></i> -->
        </div>
    </div>
...