한 줄에 두 개의 요소를 표시하십시오.

Question

부트 스트랩 입력란과 글꼴이 멋집니다. 현재 아이콘이 입력 상자 아래에 표시됩니다. 내가 뭘 하려는지 한 줄에 그들을 표시하는 것입니다. 슬프게도, 기본적 으로이 일을 할 수 없습니다. 나는 엘리먼트를 떠 다니는 방식으로 시도해 보았습니다. 인라인 블록과 다른 것을 사용했는데 작동하지 않았습니다. 도움을주십시오

<div class="col-sm-2"> 
       <input type="email" class="form-control" id="phone" placeholder="Enter Phone" readonly="readonly"><i class="fa fa-pencil" aria-hidden="true"></i> 
      </div> 

Answer 1

당신 만 <i>에 컨테이너에 display: flex; 및 <i> 태그 & align-self: center;을 시도해야합니다. 여기

---

예 :

.col-sm-2 { 
 
    display: flex; 
 
} 
 

 
.col-sm-2 > i { 
 
    display: flex; 
 
    align-self: center; 
 
    width: 30px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="col-sm-2"> 
 
    <i class="fa fa-pencil" aria-hidden="true"></i> 
 
    <input type="email" class="form-control" id="phone" placeholder="Enter Phone" readonly="readonly"> 
 
</div>

Fiddle demo

Answer 2

당신이 넣어 애드온으로 입력 그룹을 사용할 수있는 부트 스트랩 문서 (http://getbootstrap.com/css/#forms-inline)에 따르면, Addon 내부의 아이콘 :

<div class="input-group"> 
    <input type="email" class="form-control" id="phone" placeholder="Enter Phone" readonly="readonly"> 
    <div class="input-group-addon"> 
    <i class="fa fa-pencil" aria-hidden="true"></i> 
    </div> 
</div> 

Answer 3

나는 css로 간단한 해결책이있다. 먼저 열에 새 클래스를 추가하십시오.

HTML = >>>

<div class="col-sm-2 myForm"> 
    <input type="email" class="form-control" id="phone" placeholder="Enter Phone" readonly="readonly"><i class="fa fa-pencil" aria-hidden="true"></i> 
</div> 

CSS는 = >>>

.myForm .form-control{ 
    float:left; 
    width:calc(100% - 35px); 
} 
.myForm .fa{ 
    float:right; 
    width:30px; 
} 

... 여기 이 jsfiddle

더 나은 솔루션의 라이브 데모는이 시도 부트 스트랩 형태이다 CSS. 다음 링크를 따르십시오 : http://getbootstrap.com/css/#forms