ブートストラップ入力グループの複数入力のカスタム幅

Question

私はブートストラップとシンプルフォームを使用しています。私は構築しようとしている奇妙なボールのフォーム要素があります。これは私が道の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. を行う必要があります従来のフィールドラベルの欠如は、あなたがこのソリューションを試すことができ、問題

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; 
} 

が:)

をお楽しみください。