表单在Safari上无法正确对齐，但在Chrome上运行良好

Question

I have a form that works well on Chrome but it wrap to on Safari in my Ruby on Rails application.

Here is the code

.panel.panel-primary
  .panel-heading
    h4.panel-title = t('admin.statistic.filter')

  .panel-body
    = form_for form_target, url: url, html: {method: :get, class: 'form-horizontal', :autocomplete => 'off'} do |f|
      .row
        .col.col-xs-3
          = f.datagrid_label :currency
          = f.datagrid_filter :currency, class: "form-control"
        .col.col-xs-3
          = f.datagrid_label :state
          = f.datagrid_filter :state, class: "form-control"
        .col.col-xs-3
          = f.datagrid_label :type
          = f.datagrid_filter :type, class: "form-control"
        .col.col-xs-6
          = f.datagrid_label :created_at
          .form-inline # This is what I used to make it work well on Chrome, but doesn't work on Safari
            = f.datagrid_filter :created_at, class: "form-control"
        .col.col-xs-2
          = f.submit t('datagrid.form.submit'), class: "btn btn-primary", style: "width: 100%"
        .col.col-xs-2
          = link_to t('datagrid.form.clear'), {:controller => 'admin/statistic/orders', :action => 'show'}, class: 'btn btn-primary', style: "width: 100%"

Chrome Look

Safari Look

.form-inline Is what I used to make it work well on Chrome, but doesn't work on Safari

How can I fix this?

Answer 1

可能要检查https://browserstrangeness.bitbucket.io/css_hacks.html#webkit显示可能有助于解决此问题的媒体查询

Answer 2

After reading through grid columns in bootstrap, I figured there is not reason my code should not work well on the two browsers. The problem being that Safari calculates differently.

So, I figured out grid column already past 12 column in Bootstrap 3 and 24 in Bootstrap 4. Upon adjusting the column I feel should be smaller and extend/increased the number of the part that wrap to new line. it works fine.

In other words, I increase this part .col-xs-6 in the snippet below to .col-xs-8 , while I reduced others:

.col.col-xs-8
          = f.datagrid_label :created_at
          .form-inline # This is what I used to make it work well on Chrome, but doesn't work on Safari
            = f.datagrid_filter :created_at, class: "form-control"