I want to adjust the width of the text field in Bootstrap 3.

Enter a description of the image here

.col-sm-12#customer
  %h2 Customer Information
  %dl.dl-horizontal
    %dt Phone Number
    %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")
        Enter <b>03-9999-9999</b> in .supplementation half-width.

ruby-on-rails bootstrap haml

2022-09-30 20:35

2 Answers

Instead of thinking too hard, I thought it would be better to add a class to each item and specify the width on the style sheet.

.col-sm-12#customer
  %h2 Customer Information
  %dl.dl-horizontal
    %dt Phone Number
    %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")
        Enter <b>03-9999-9999</b> in .supplementation half-width.

custom.sass

.area-code
  width —30px
.city-code, .subscriber-number
  width —50px

If there are any restrictions that cannot be adopted, please add them to the question.

2022-09-30 20:35

.form-group
  %label.col-xs-2.control-label Phone Number
  .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
    In %p.help-block half-width, type <b>03-9999-9999</b>

I don't know the cause, but I set the width in the style and it worked.
Thank you.

2022-09-30 20:35

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656