

![画像の説明をここに入力](https://i.stack.imgur.com/DeRnl.png)

[code]

    .col-sm-12#customer
      %h2 顧客情報
      %dl.dl-horizontal
        %dt 電話番号
        %dd
          %div(style="padding: 0px;" class="col-sm-4")
            .input-group
              = text_field_tag 'customer[phone1]', '', class: "form-control"
              %span.input-group-addon －
              = text_field_tag 'customer[phone2]', '', class: "form-control"
              %span.input-group-addon －
              = text_field_tag 'customer[phone3]', '', class: "form-control"
          %div(style="padding: 0px;" class="col-sm-12")
            .supplementation 半角で <b>03-9999-9999</b> のように入力してください。
    
[/code]


CC BY-SA 3.0
2015-03-17T06:47:38.983
8009
2015-08-15T09:38:31.590
2015-03-17T21:58:53.810
85
8878
question
ruby-on-rails bootstrap haml
Bootstrap 3 でテキストフィールドの幅を調整したい。


あまり難しく考えずに、各項目にclassを付けて、スタイルシートで幅を指定すればよいのでは？と思いました。

[code]

    .col-sm-12#customer
      %h2 顧客情報
      %dl.dl-horizontal
        %dt 電話番号
        %dd
          %div(style="padding: 0px;" class="col-sm-4")
            .input-group
              = text_field_tag 'customer[phone1]', '', class: "form-control area-code"
              %span.input-group-addon －
              = text_field_tag 'customer[phone2]', '', class: "form-control city-code"
              %span.input-group-addon －
              = text_field_tag 'customer[phone3]', '', class: "form-control subscriber-number"
          %div(style="padding: 0px;" class="col-sm-12")
            .supplementation 半角で <b>03-9999-9999</b> のように入力してください。
    
[/code]

custom.sass

[code]

    .area-code
      width: 30px
    .city-code, .subscriber-number
      width: 50px
    
[/code]

もし、こういったやり方を採用できない制約があれば質問に追記してください。


CC BY-SA 3.0
2015-03-17T22:10:25.567
8034
2015-03-17T22:10:25.567
85
8009
answer

[code]

    .form-group
      %label.col-xs-2.control-label 電話番号
      .col-xs-10
        %div(style="padding: 0px;" class="col-xs-5")
          .input-group
            = text_field_tag 'customer[phone1]', '', class: "form-control", style: "width: 60px;"
            %span.input-group-addon －
            = text_field_tag 'customer[phone2]', '', class: "form-control", style: "width: 120px;"
            %span.input-group-addon －
            = text_field_tag 'customer[phone3]', '', class: "form-control", style: "width: 120px;"
      .col-xs-offset-2.col-xs-10
        %p.help-block 半角で <b>03-9999-9999</b> のように入力してください。
[/code]

原因が分からないのですが、style に width を設定したらうまく行きました。  
ありがとうございました。


CC BY-SA 3.0
2015-03-18T07:17:21.940
8054
2015-03-18T07:17:21.940
8878
8009
answer