부트 스트랩 테이블 요소가 올바르게 정렬되지 않았습니다.

Question

테이블이 하나 있는데 요소 중 하나가 올바르게 정렬되지 않았습니다.

group-addon = radio + 텍스트 상자가 필요하지만 구성 요소가 제대로 정렬되지 않았습니다. 여기

코드입니다 : -

</td> 
       <!--<td>Ticket #--> 
       <td>      
        <div class="input-group"> 
         <div class="input-group" style="text-align:center"> 
          <label class="radio-inline" for="radio1" class="form-control"> 
          <input type="radio" id="radio1" name="tkt-radio" value='JIRA' class="form-control"></label> 
          <span class="input-group-addon">-</span> 
          <input class="form-control" id="ticket_no" width="10%" placeholder="Ticket Number" class="form-control">   
         </div> 
        </div> 
       </td> 

출력 :

Answer 1

귀하의 입력이 자신의 그룹으로 밖으로 분리 될 필요가있다. 대신 모든 것을

하나 <div class="input-group"> 래핑되고 그들은 같은 속으로 구분한다 : I 위의 소자 분리 각 입력에서 추가 class="form-control" 제거 포함하도록 만들었다

<div class="input-group" style="text-align:center"> 
    <label for="radio1" > 
    <input type="radio" id="radio1" name="tkt-radio" value='JIRA' class="form-control"> 
    </label> 
</div> 
<div class="input-group"> 
    <span class="input-group-addon">-</span> 
    <input class="form-control" id="ticket_no" placeholder="Ticket Number"> 
</div> 

변화 (및 레이블)을 자신의 input-group 컨테이너에 저장합니다. 당신이 크기로 각 컨테이너의 폭 현명한 필요한 부트 스트랩 col-[lg/md/sm/..]을 추가하고 추가 할 수 있습니다 거기에서

을 (당신이 라디오 요소에 대한 input-group-addon를 사용하지 않기 때문에 정말 처음은 모든 input-group 클래스를 필요로하지 않는다) 귀하의 필요에 따라 응답 성.