我有一个rails 5应用程序，它有一个可折叠的移动导航栏和可折叠导航侧边栏 . 当我通过运行heroku本地模拟移动环境然后检查chrome dev工具时，它表现正常：导航栏折叠到右上角的一个小图标，侧栏折叠到左侧的一个小图标屏幕，用css放置 . 然而，当我在我的实际手机（iphone 6）上打开应用程序时，导航栏图标位于错误的位置（它向下移动了一个“行”，导航栏品牌位于左侧，折叠按钮位于下方它在右边，而不是与右边的平行），当我按下它时，侧边栏按钮什么都不做 .

Chrome开发工具不会显示任何错误 .

老实说，我不确定问题是什么 - 我认为这是某种资产管道预编译错误，我花了一段时间试图让它工作，但在heroku上本地和远程预编译资产没有任何影响 .

知道什么可能是错的吗？

以下是一些代码文件，但可能有所帮助：

应用程序/视图/布局/ application.html.erb：

<!DOCTYPE html>
<html>
    <head>
        <title>TheLeagueBuilders</title>
        <%= csrf_meta_tags %>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
        <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    </head>
    <body>
        <div class="container-fluid">
            <%= render 'layouts/sidebar' %>
        </div>
        <div class="container-fluid">
            <%= render 'layouts/navigationBar' %>
        </div>
        <div class="container-fluid">
            <p class="notice"><%= notice %></p>
            <p class="alert"><%= alert %></p>
        </div>
        <div class="container-fluid col-sm-9 offset-sm-3 col-md-10 offset-md-2">
            <%= yield %>
        </div>
    </body>
</html>

应用程序/资产/样式表/ application.scss：

@import "welcome";
@import "font-awesome";
@import "bootstrap";


/*Font awesome icon*/
i {
    padding-top: 308px;
    z-index: 1001;
    position: fixed;
}

配置/环境/ production.rb：

Rails.application.configure do

  config.cache_classes = true
  config.eager_load = true
  config.consider_all_requests_local       = false
  config.action_controller.perform_caching = true

  config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?

  # Compress JavaScripts and CSS.
  config.assets.js_compressor = :uglifier
  # config.assets.css_compressor = :sass

  # Do not fallback to assets pipeline if a precompiled asset is missed.
  config.assets.compile = false

  # `config.assets.precompile` and `config.assets.version` have moved to config/initializers/assets.rb

  # Enable serving of images, stylesheets, and JavaScripts from an asset server.
  # config.action_controller.asset_host = 'http://assets.example.com'


  config.log_level = :debug

  # Prepend all log lines with the following tags.
  config.log_tags = [ :request_id ]

  # Use a different cache store in production.
  # config.cache_store = :mem_cache_store

  # Use a real queuing backend for Active Job (and separate queues per environment)
  # config.active_job.queue_adapter     = :resque
  # config.active_job.queue_name_prefix = "TheLeagueBuilders_#{Rails.env}"
  config.action_mailer.perform_caching = false

  # Ignore bad email addresses and do not raise email delivery errors.
  # Set this to true and configure the email server for immediate delivery to raise delivery errors.
  # config.action_mailer.raise_delivery_errors = false

  # Enable locale fallbacks for I18n (makes lookups for any locale fall back to
  # the I18n.default_locale when a translation cannot be found).
  config.i18n.fallbacks = true

  # Send deprecation notices to registered listeners.
  config.active_support.deprecation = :notify

  # Use default logging formatter so that PID and timestamp are not suppressed.
  config.log_formatter = ::Logger::Formatter.new

  # Use a different logger for distributed setups.
  # require 'syslog/logger'
  # config.logger = ActiveSupport::TaggedLogging.new(Syslog::Logger.new 'app-name')

  if ENV["RAILS_LOG_TO_STDOUT"].present?
    logger           = ActiveSupport::Logger.new(STDOUT)
    logger.formatter = config.log_formatter
    config.logger = ActiveSupport::TaggedLogging.new(logger)
  end

  # Do not dump schema after migrations.
  config.active_record.dump_schema_after_migration = false

  # Emailing
  config.action_mailer.default_url_options = { :host => 'fierce-woodland-66524.herokuapp.com' }

  #These settings are for the sending out email for active admin and consequently the   devise mailer
  config.action_mailer.delivery_method = :smtp
  ActionMailer::Base.smtp_settings = {
    :address => 'smtp.sendgrid.net',
    :port => '587',
    :authentication => :plain, 
    :user_name => ENV["SENDGRID_USERNAME"],
    :password => ENV["SENDGRID_PASSWORD"],
    :domain => 'heroku.com',
    :enable_starttls_auto => true 
  }
end

还有一些侧边栏代码：

<div class="row">
    <% if user_signed_in? %>

        <div class="hidden-md-up">
            <i class="fa fa-arrow-circle-right fa-2x" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample" aria-hidden="true"></i> <!--Rename href, aria-controls-->
        </div>

        <!--Use CSS instead of style!-->
        <nav class="col-sm-3 col-md-2 bg-faded" id="collapseExample" style="position:fixed;top:51px;bottom:0px;padding:20px;z-index:1000;">
            <div class="">
                <ul class="navbar-nav">
                    .............
                </ul>
            </div>
        </nav>
    <% end %>
</div>

任何帮助都将真正得到真正的赞赏 . 谢谢！

css ruby-on-rails twitter-bootstrap heroku mobile