오른쪽에있는 입력 안에 부트 스트랩 아이콘을 추가하십시오.

Question

부트 스트랩으로 작업하기 시작 했으므로 다음을 수행해야합니다. 오른쪽에 두 개의 아이콘을 추가하려는 입력이 있습니다. 'div'이긴하지만 아래로 갈 것입니다. css NI 디자인과 잘 맞지 않으므로 어떻게해야하는지 알려주는 것이 좋습니다.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="col-lg-4"> 
 
<input type='text' value='' class='form-control'><a><i class='fa fa-check-circle fa-2x' aria-hidden='true'></i></a> <a><i class='fa fa-times-circle fa-2x' aria-hidden='true'></i></a> 
 
</div>

Answer 1

이

<div class='input-group form-group'> 
<label class='input-group-addon'><i class='fa fa-check-circle fa-2x'></i></label> 
<label class='input-group-addon'><i class='fa fa-times-circle fa-2x'></i></label> 
<input type="text" value="" class="form-control"/> 
</div> 

Answer 2

.input-group 클래스 시도는 "도움으로 아이콘, 텍스트 또는 전면에 버튼이나 뒤에 추가하여 입력을 향상시킬 수있는 컨테이너입니다 본문".

.input-group-addon 클래스는 아이콘 또는 도움말 텍스트를 입력 필드 옆에 연결합니다. 더 많은 정보 XFER 들어

는 : bootstrap_forms_inputs

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 

 
<div class="col-lg-4"> 
 
    <div class="input-group"> 
 
    <input class="form-control left-border-none" placeholder="User Name" type="text" name="username"> 
 
    <span class="input-group-addon transparent"> 
 
    <i class='fa fa-check-circle fa-lg' aria-hidden='true'></i></span> 
 
    <span class="input-group-addon transparent"> 
 
    <i class='fa fa-times-circle fa-lg' aria-hidden='true'></i></span> 
 
    </div> 
 
</div>

또 다른 해결책, 당신은 오른쪽에있는 아이콘을 정렬하는 CSS 속성 position & right의 조합을 사용할 수 있습니다. top을 사용하여 위에서 정렬하십시오. 오른쪽에 padding을 추가하여 입력하십시오. 그러나, 회신에 대한

.check-icon { 
 
right:50px; 
 
position:absolute; 
 
top:2px; 
 
} 
 

 
.times-icon { 
 
right:20px; 
 
position:absolute; 
 
top:2px; 
 
} 
 

 
.icon-input { 
 
padding-right:60px !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="col-lg-4"> 
 
<input type='text' value='' class='form-control icon-input'><a><i class='fa fa-check-circle fa-2x check-icon' aria-hidden='true'></i></a> <a><i class='fa fa-times-circle fa-2x times-icon' aria-hidden='true'></i></a> 
 
</div>