Question

升级到Bootstrap 4，我在任何地方都找不到该问题的答案。为了使Datetime Picker正常工作，我为.CSS和JavaScript文件找到了该版本：

https://github.com/tempusdominus/bootstrap-4

此方法有效，我的Datetime选择器完成了应做的工作。但是，如果我随后将CSS文件更改为使用rem而不是px，则右侧的Datetime Picker图标大约是其应有高度的一半。这是HTML的样子：

           <div class="row">
              <div class="col-4 offset-2">
                 <label for="date_started">Date Started:</label>
                 <div class="input-group date" id="datetimepicker_pos_date_start" style="width: 250px;">
                    <input name="date_started" id="date_started" type="text" class="form-control" />
                    <span class="input-group-addon">
                       <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                    </span>
                 </div> <!-- // input-group -->
                 <p class="help-block">Provide the date you started this position, if known.</p>
              </div> <!-- // col-4 -->
           </div> <!-- // row -->

在我更改站点以开始使用rem而不是px进行CSS文件中的测量之前，该代码可以使用正确的JavaScript完美运行，依此类推。但是确实发生的是，右侧按钮的高度大约是其应有高度的一半。

我意识到这段代码并未在Bootstrap 4“ input-group-append”中使用新的替换项，但是当我尝试对其进行更改时，整个过程停止了工作。我找不到可以使按钮位于输入区域右侧的正确高度的任何设置。如果我这样离开，它可以工作，但是按钮的高度不正确。

在网站的其他部分对我的CSS文件进行了大量更改之后，我不知道可能会影响到这一点。整个CSS文件太长，无法在此处发布，但顶部的基础知识在这里：

html
{
  /* required for fixed footer */
  position: relative;
  min-height: 100%;
  font-size: 62.5%; /* = 10px */
}


body
{ 
   font-family: Arial, Helvetica, sans-serif;
   font-size: 1.6rem; /* = 16px */
   /*   font-size: 16px; */
   color: #000000; 
   background-color: #FFFFFF;
   margin-top: 1.0rem; /* 10px; */
   margin-left: .2rem; /* 2px; */
   margin-right: .2rem; /* 2px; */
   padding: .5rem; /* 5px; */
   /* for fixed footer */
   margin-bottom: 4.0rem; /* 40px; */
}

我希望有人对此有一定的经验，或者可能的解决方案。我尝试将其放入我的CSS文件中，但似乎根本没有任何作用：

.input-group-addon, input-group-text
{
   height: 3.0rem !important;
   font-size: 3.0rem !important;
}

Bootstrap 4，Datetimepicker，转换为Rems图标太小

0 个答案: