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

Question

我有一个可以在Chrome上正常运行的表单，但在我的Ruby on Rails应用中wrap可以在Safari上运行。

这是代码

.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浏览器

Safari浏览器

.form-inline是我用来使其在Chrome上正常运行的原因，但在Safari上不起作用

我该如何解决？

Answer 1

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

Answer 2

在引导程序中通读grid columns之后，我发现我的代码在两种浏览器上均无法正常运行的原因并没有。问题是Safari的计算方式不同。

因此，我发现grid column已经超过了Bootstrap 3的12列和Bootstrap 4的24个列。调整该列后，我觉得应该变小并且增加/增加换行的部分的数量。效果很好。

换句话说，我将下面的代码片段中的.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"