html - 如何使此输入元素响应低分辨率屏幕？

Question

这是我试图使其响应的输入元素的 html。

我试图让输入响应较低的屏幕分辨率，例如 1200 X 600。这是此 HTML 的 CSS。

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

Answer 1

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