Форма не выравнивается должным образом в Safari, но хорошо работает в Chrome

Question

У меня есть форма, которая хорошо работает на Chrome, но она wrap на Safari в моем приложении Ruby on Rails.

Вот код

.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 Это то, что я использовал, чтобы заставить его хорошо работать в Chrome, но не работает в Safari

Как это исправить?

Answer 1

Прочитав grid columns в начальной загрузке, я понял, что нет причин, по которым мой код не должен хорошо работать в двух браузерах.Проблема в том, что Safari рассчитывает по-разному.

Итак, я вычислил grid column уже прошедшие 12 столбцов в Bootstrap 3 и 24 в Bootstrap 4. После настройки столбца я чувствую, что должен быть меньше и увеличивать / увеличивать количество деталей, которые переносятся на новую строку,все работает нормально.

Другими словами, я увеличиваю эту часть .col-xs-6 в приведенном ниже фрагменте до .col-xs-8, а другие уменьшаю:

.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"

Answer 2

Может потребоваться проверить https://browserstrangeness.bitbucket.io/css_hacks.html#webkit показывает медиа-запросы, которые могут помочь с этой проблемой