Rails的简单形式:将字体真棒图标移动到输入字段旁边

问题描述

我正在使用bootstrap datepicker插件一个简单表单内的两个输入字段中使用

<div class="row">
  <div class="col-lg-6">
     <div class="form-group" id="datepickerContainer">
       <i class="fas fa-calendar-alt"></i>
       <%= f.label "From" %>
       <%= f.input :from,:as => :string,label: false,:input_html => { :class => "datepicker",:id=>"datepickerContainer" } %>
      </div>
  </div>

  <div class="col-lg-6">
     <div class="form-group" id="datepickerContainer">
        <i class="fas fa-calendar-alt"></i>
        <%= f.label "Until" %>
        <%= f.input :until,:input_html => { :class => "datepicker" } %>
      </div>
   </div>
</div>

目前,如您在上面看到的,每个标签旁边都有一个字体超赞图标...,我想将每个输入旁边的超棒图标移动如下:

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1"><i class="fas fa-calendar-alt"></i></span>
  </div>
  <input type="text" class="form-control" aria-label="Username" aria-describedby="basic-addon1">
</div>

所以我正在这样做:

 <div class="input-group mb-3">
     <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1"><i class="fas fa-calendar-alt"></i></span>
      </div>
        <%= f.input :from,:id=>"datepickerContainer" } %>
 </div>

但是我得到的结果是

enter image description here

知道我在做什么错吗?

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)