如何使眼睛图标的位​​置响应

Question

在self.kwargs['pk']，内容将居中对齐。位置绝对的眼睛图标渐行渐远。在大型设备上也可以，但是col-sm-12及其以下位置有问题。

之所以将其定位为绝对，是因为我希望图标不会移动。在原始代码中，具有隐藏和显示密码以及根据文本长度移动图标的功能。

@media only screen and (max-width: 991px)

.card-plans {
   -webkit-box-shadow: 0px -2px 5px 0px rgba(217,214,217,1);
   -moz-box-shadow: 0px -2px 5px 0px rgba(217,214,217,1);
    box-shadow: 0px -2px 5px 0px rgba(217,214,217,1);
    transition: 0.3s;
    border: 1px solid grey;
  }
  
  .container-plans {
    padding: 5px 28px 5px 28px !important;
  }

  .cred-title {
    text-align: center;
    font-size: 20px !important;
    font-weight: bold;
  }

  .details {
    font-size: 16px !important;
  }

  .details:not(:last-of-type) {
    margin-bottom: 10px !important;
  }


.current-plan {
font-size: 18px;
background: yellowgreen;
padding: 3px 15px;
display: inline-block;
}

.e {
  margin-top: 50px;
  margin-bottom: 20px;
}


.pass {
  cursor: pointer;
}
.stars {
  position: relative;
  top: 0.45ex;
}

.x {
  position: absolute;
  /* top: 78px; */
  left: 300px;
}

.card-plans {
  border-radius: 10px;
}

    
@media only screen and (max-width: 991px)  {
.center {
  margin: 0 auto;
  text-align: center;
}
.x {
  position: absolute;
  left: 600px;
} 
}

Answer 1

绝对位置时，请确保您有一个好的亲戚。 我将您的眼睛放在密码xxxx字段中。并取得相对。 然后无需媒体查询。

.card-plans {
   -webkit-box-shadow: 0px -2px 5px 0px rgba(217,214,217,1);
   -moz-box-shadow: 0px -2px 5px 0px rgba(217,214,217,1);
    box-shadow: 0px -2px 5px 0px rgba(217,214,217,1);
    transition: 0.3s;
    border: 1px solid grey;
  }
  
  .container-plans {
    padding: 5px 28px 5px 28px !important;
  }

  .cred-title {
    text-align: center;
    font-size: 20px !important;
    font-weight: bold;
  }
  .relative {
  position: relative
  }

  .details {
    font-size: 16px !important;
  }

  .details:not(:last-of-type) {
    margin-bottom: 10px !important;
  }


.current-plan {
font-size: 18px;
background: yellowgreen;
padding: 3px 15px;
display: inline-block;
}

.e {
  margin-top: 50px;
  margin-bottom: 20px;
}


.pass {
  cursor: pointer;
}
.stars {
  position: relative;
  top: 0.45ex;
}

.x {
  position: absolute;
  right: -25px;
}

.card-plans {
  border-radius: 10px;
}

    
@media only screen and (max-width: 991px)  {
.center {
  margin: 0 auto;
  text-align: center;
}
.x {
  position: absolute;
  right: -25px;
} 
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="e">
          <div class="row">
              <div class="col-sm-12 col-md-6 col-lg-5 col-lg-offset-1">
                  <div class="card-plans">
                    <div class="container-plans">
                      <br>
                      <p class="cred-title">Credentials</p><br>
                     <div class="center">
                      <p class="details"><strong>Username:</strong>&nbsp;Joha Lee</p>
                      <p class="details"><strong>Password:</strong>&nbsp;
                        <span class="stars relative">****************************<i class="x fa fa-eye" aria-hidden="true"></i></span>
                         
                       </p>
                        <br>
                        </div>
                      </div>
                     
                  </div>
                </div>
                <div class="col-sm-12 col-md-6 col-lg-5">
                  <div class="card-plans">
                    <div class="container-plans">
                      <br>
                      <p class="cred-title">Current Plan </p><br>
                      <div class="center">               
                      <p class="details"><strong>Type:</strong>&nbsp; Dxx Emails</p>
                      <p class="details"><strong>Plan Cost:</strong>&nbsp; 3332/ Month
                      </p>
                       <br>
                     </div>
                    </div>
                  </div>
                </div>
          </div>
</div>