부트 스트랩 입력 그룹의 여러 입력에 대한 사용자 정의 너비

Question

부트 스트랩 및 단순 양식을 사용하고 있습니다. 나는 이상한 공 모양의 요소를 가지고있어 내가 구조하려고 노력하고있다.

<%= f.input :lsd_from, label: 'LSD From', wrapper: :horizontal_input_group do %> 
     <%= f.text_field :lsd_from, placeholder: 'LSD', class: 'form-control' %> 
     <span class="input-group-addon">-</span> 
     <%= f.text_field :sec_from, placeholder: 'SEC', class: 'form-control' %> 
     <span class="input-group-addon">-</span> 
     <%= f.text_field :twp_from, placeholder: 'TWP', class: 'form-control' %> 
     <span class="input-group-addon">-</span> 
     <%= f.text_field :rge_from, placeholder: 'RGE', class: 'form-control' %> 
     <span class="input-group-addon">W</span> 
     <%= f.text_field :m_from, class: 'form-control' %> 
     <span class="input-group-addon">M</span> 
    <% end %> 

에 렌더링 :

<div class="form-group integer optional pipeline_segment_lsd_from"> 
    <label class="integer optional col-sm-2 control-label" for="pipeline_segment_lsd_from">LSD From</label> 
    <div class="col-sm-6"> 
    <div class="input-group col-sm-12"> 
     <input placeholder="LSD" class="form-control" type="text" name="pipeline_segment[lsd_from]" id="pipeline_segment_lsd_from" style="width: 50px;"> 
     <span class="input-group-addon">-</span> 
     <input placeholder="SEC" class="form-control" type="text" name="pipeline_segment[sec_from]" id="pipeline_segment_sec_from" style="width: 50px;"> 
     <span class="input-group-addon">-</span> 
     <input placeholder="TWP" class="form-control" type="text" name="pipeline_segment[twp_from]" id="pipeline_segment_twp_from" style="width: 50px;"> 
     <span class="input-group-addon">-</span> 
     <input placeholder="RGE" class="form-control" type="text" name="pipeline_segment[rge_from]" id="pipeline_segment_rge_from" style="width: 50px;"> 
     <span class="input-group-addon">W</span> 
     <input class="form-control" type="text" name="pipeline_segment[m_from]" id="pipeline_segment_m_from" style="width: 20px;"> 
     <span class="input-group-addon">M</span> 
    </div> 
    </div> 
</div> 

및 다음과 같습니다 : 내가 찾고 있어요

이이 방식 나에게 95 %를 얻는 코드입니다 이 :

이슈는 내가 개별 필드에 특정 폭을 설정할 수 있습니다 어떻게 input-group-addon 이웃 입력

사이

• 약간의 간격을입니까?

나는 래퍼 범위가 부모를 채우기 위해 스트레칭하고자하는 필드의 폭을 해결하려고이 같은 요소 사이의 패딩/마진의 모든 종류로 끝날 경우 :

이

1. 내가 input-group-addon 등 회색 빛
2. 나는 또한해야해야한다 : 보조 노트에

   가벼운

3. 이 데이터 항목이 사용자에게 알려져 자리 표시 자 텍스트는 그래서 기존의 필드 레이블의 부족이 문제가

Answer 1

당신은이 솔루션을 시도 할 수 있습니다에게해서는 안됩니다. 나는 이것이 당신의 상황에서 효과가 있기를 바랍니다.

대신 입력에 폭을 설정하는 CODEPEN

에서 예를 확인하시기 바랍니다. 입력 그룹 주위에 div을 입력하고 최대 너비를 div으로 설정하면 뷰포트 영역을 늘린 경우에도 입력 너비를 고정 할 수 있습니다.

또한 측면을 고려하여 몇 가지 사항을 변경했습니다. 이에 대한 예제 링크를 확인하십시오.

HTML :

는

<div class="section-input"> 
     <div class="input-group"> 
     <input placeholder="LSD" class="form-control" type="text" name="pipeline_segment[lsd_from]" id="pipeline_segment_lsd_from"> 
     <span class="input-group-addon">-</span> 
     <input placeholder="SEC" class="form-control" type="text" name="pipeline_segment[sec_from]" id="pipeline_segment_sec_from"> 
     <span class="input-group-addon">-</span> 
     <input placeholder="TWP" class="form-control" type="text" name="pipeline_segment[twp_from]" id="pipeline_segment_twp_from"> 
     <span class="input-group-addon">-</span> 
     <input placeholder="RGE" class="form-control" type="text" name="pipeline_segment[rge_from]" id="pipeline_segment_rge_from"> 
     <span class="input-group-addon">W</span> 
     <input class="form-control" type="text" name="pipeline_segment[m_from]" id="pipeline_segment_m_from"> 
     <span class="input-group-addon">M</span> 
     </div> 
    </div> 

CSS :

.section-input { 
    max-width: 454px; 
    margin: auto; 
} 

.section-input .input-group .form-control { 
    border-radius: 0; 
    border: 1px solid #555; 
} 

.section-input .input-group .input-group-addon { 
    border-radius: 0; 
    border: 1px solid #555; 
    border-left: 0; 
    border-right: 0; 
    background-color: #efefef; 
} 

.section-input .input-group .input-group-addon:first-child { 
    border-left: 1px solid #555; 
} 

.section-input .input-group .input-group-addon:last-child { 
    border-right: 1px solid #555; 
} 

는 :)

을 즐길 수