.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> のように入力してください。
コメントを追加
|
2 件の回答
あまり難しく考えずに、各項目にclassを付けて、スタイルシートで幅を指定すればよいのでは?と思いました。
.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> のように入力してください。
custom.sass
.area-code
width: 30px
.city-code, .subscriber-number
width: 50px
もし、こういったやり方を採用できない制約があれば質問に追記してください。
.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> のように入力してください。
原因が分からないのですが、style に width を設定したらうまく行きました。
ありがとうございました。
-
うまくいったのであれば良かったです。が、一般的にHTML内にstyleをベタ書きするのはあまり好ましくないプラクティスとされています。なぜ好ましくないのかはここでは書きません。ネットの情報等を参考にしてご自身で理由を考えてみて下さい。また、さらに細かいことを言うと原因がわからないまま放置するのも技術者として危うい気がします。わからないまま放っておくか、納得がいくまで原因と解決策の関係を追求するかで、技術者としての成長具合に大きく差が出てきます。もしden256さんが「技術者としてもっとスキルを伸ばしたい」と思われるのであれば、僕が今回指摘したこの2点をもう一度掘り下げて考えてみて下さい。 Commented 2015年3月18日 19:16
-