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>

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

1 个答案: