HAML - Boostrap Addressblock erstellen

AxelM · 21.08.2014

Hallo,
das Projekt wird in Puby on Rails umgesetzt.
Fürs Layout wird HAML und Bootstrap genutzt.
ich würde nun gerne einen Adressblock dastellen ala:
Name1
Name2
Zusatz
Straße
plz Ort

PLZ und Ort bekomme ich schon hintereinander,
nur hätte ich jetzt noch gern, dass beide Felder zusammen genauso lang sind, wie die anderen Felder.
relevant sind die letzten 10 Zeilen

Code:

.row
  .col-md-0
  .col-md-12
    .panel-primary.panel
      .panel-heading
        = t('New order')
      .panel-body
        .row
          .col-md-12
            = simple_form_for @order, :html => { :class => 'form-horizontal', autocomplete: "off" }, wrapper: :horizontal_form, |
              wrapper_mappings: { |
                check_boxes: :horizontal_radio_and_checkboxes, |
                radio_buttons: :horizontal_radio_and_checkboxes, |
                file: :horizontal_file_input, |
                boolean: :horizontal_boolean |
              } |
            do |f| |
              = f.error_notification
              - if f.error :base
                .alert.alert-danger
                  = f.error :base
              .row
                .col-md-1
                .col-md-10
                  .row
                    .col-md-6
                      .row
                        .col-md-12
                          = t('billingaddress')
                          = f.input :billingaddress_name1, :placeholder => Order.human_attribute_name('billingaddress_name1'), :label => false
                          = f.input :billingaddress_name2, :placeholder => Order.human_attribute_name('billingaddress_name2'), :label => false
                          = f.input :billingaddress_street, :placeholder => Order.human_attribute_name('billingaddress_street'), :label => false
                          = f.input :billingaddress_zusatz, :placeholder => Order.human_attribute_name('billingaddress_zusatz'), :label => false
                          .row 
                            .col-md-4
                              = f.input :billingaddress_zip, :placeholder => Order.human_attribute_name('billingaddress_zip'), :label => false
                            .col-md-7
                              = f.input :billingaddress_city, :placeholder => Order.human_attribute_name('billingaddress_city'), :label => false
                          = f.input :billingaddress_country, :placeholder => Order.human_attribute_name('billingaddress_country'), :label => false, priority: ["DE","AT","CH","FR","GB"], iso_codes: true
                    .col-md-6
                      .row
                        .col-md-12
                          = t('deliveryaddress')
                          = f.input :deliveryaddress_name1, :placeholder => Order.human_attribute_name('deliveryaddress_name1'), :label => false
                          = f.input :deliveryaddress_name2, :placeholder => Order.human_attribute_name('deliveryaddress_name2'), :label => false
                          = f.input :deliveryaddress_street, :placeholder => Order.human_attribute_name('deliveryaddress_street'), :label => false
                          = f.input :deliveryaddress_zusatz, :placeholder => Order.human_attribute_name('deliveryaddress_zusatz'), :label => false
                         
                          .col-md-12.form-inline
                            = f.input :deliveryaddress_zip, :placeholder => Order.human_attribute_name('deliveryaddress_zip'), :label => false
                            = f.input :deliveryaddress_city, :placeholder => Order.human_attribute_name('deliveryaddress_city'), :label => false
                          = f.input :deliveryaddress_country, :placeholder => Order.human_attribute_name('deliveryaddress_country'), :label => false, priority: ["DE","AT","CH","FR","GB"], iso_codes: true

msa1989 · 21.08.2014

Hi,
wenn ich glaube dein Problem verstanden zu haben, dann sollte der Fehler in dem verschachtelten Teil der PLZ + Ort liegen.
Hier verwendest du col-md-4 und col-md-7. 7 und 4 macht 11. Bei Bootstrap hast du immer ein Layout mit 12. Also musst du einfach nur eine breiter machen. (z.B. col-md-4 und col-md-8)
Danach sollte alles wieder gleich breit sein.