Пользовательские ширины для нескольких входов в группе ввода Bootstrap

Question

Я использую Bootstrap и Simple Form. У меня есть элемент формы нечетного шара, который я пытаюсь построить. Это код, который получает меня 95% пути туда:

<%= 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> 

и выглядит следующим образом:

Ищу это:

вопросы являются

• Небольшое расстояние между 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; 
} 

Наслаждайтесь :)