如何让我的导航栏图像响应我的导航栏

Posted 2023-05-09

【中文标题】如何让我的导航栏图像响应我的导航栏

【英文标题】：How to get my navbar image to be responsive with my navbar

【发布时间】：2019-10-21 13:08:25

【问题描述】：

目前，当我在桌面上时，我的导航栏看起来很完美。当我转到移动设备时，我的导航栏图像不适合我的移动导航栏。例如，这是一张我的图像的图片，但我的汉堡菜单不存在。

enter image description here

刷新页面后，汉堡菜单显示

enter image description here

不确定这是否也是 Rails 问题，但我必须刷新我的页面才能让我的汉堡图标显示在我的移动导航栏上。

<header id="header-wrap">
  <!-- Navbar Start -->
  <nav class="navbar navbar-expand-lg fixed-top scrolling-navbar">
    <%= link_to image_tag("logo2.png", alt: "Brand"), root_path, :class=>'navbar-brand' %>
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
          <span class="lni-menu"></span>
          <span class="lni-menu"></span>
          <span class="lni-menu"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse" id="main-navbar">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item dropdown active">
            <%= link_to 'Home', root_path, class: 'nav-link dropdown active' %>
          </li>
          <li class="nav-item">
            <%= link_to 'Categories', categories_path, class: 'nav-link' %>
          </li>
          <li class="nav-item dropdown">
            <%= link_to 'Business Directory', business_directory_path, class: 'nav-link dropdown-toggle' %>
          </li>
          <li class="nav-item dropdown">
            <%= link_to 'Partners', partner_path, class: 'nav-link dropdown-toggle' %>
          </li>
          <li class="nav-item">
            <%= link_to 'News & Tech', blogs_path, class: 'nav-link' %>
          </li>
        </ul>
        <ul class="sign-in">
          <% if user_signed_in? %>
            <li class="nav-item dropdown">
              <%= link_to 'My Account', edit_user_registration_path, :class => 'nav-link dropdown-toggle', 'aria-haspopup' => 'true', 'aria-expanded' => 'false' %>
              <div class="dropdown-menu">
                <%= link_to 'My Ads', myads_path, class: 'dropdown-item' %>
                <%= link_to 'Inbox', conversations_path, class: 'dropdown-item' %>
                <%= link_to 'Settings', edit_user_registration_path, class: 'dropdown-item' %>
                <%= link_to 'Logout', destroy_user_session_path, method: :delete, :class => 'dropdown-item' %>
              </div>
            </li>
          <% else %>
          <li class="nav-item">
            <%= link_to 'Login / Signup', new_user_session_path, :class => 'nav-link dropdown-toggle' %>
          </li>
          <% end %>
        </ul>
        <%= link_to 'Post Ad', new_post_path, :class => 'tg-btn' %>
      </div>
    </div>

    <!-- Mobile Menu Start -->
    <ul class="mobile-menu">
      <li>
        <%= link_to 'Home', root_path, class: 'active' %>
      </li>
      <li>
        <%= link_to 'Catgeories', categories_path %>
      </li>
      <li>
        <%= link_to 'Business Directory', business_directory_path %>
      </li>
      <li>
        <%= link_to 'Partners', partner_path %>
      </li>
      <li>
        <%= link_to 'News & Tech', blogs_path %> 
      </li>
      <li>
        <%= link_to 'Post Ad', new_post_path %> 
      </li>
      <li>
        <% if user_signed_in? %>
        <%= link_to 'My Account', edit_user_registration_path %>
        <ul class="dropdown">
          <li><%= link_to 'My Account', edit_user_registration_path %></li>
          <li><%= link_to 'My Ads', myads_path %></li>
          <li><%= link_to 'Settings', edit_user_registration_path %></li>
          <li><%= link_to 'Logout', destroy_user_session_path, method: :delete %></li>
        </ul>
        <% else %>
        <%= link_to 'Login / Signup', new_user_registration_path %>
        <% end %>
      </li>
    </ul>
    <!-- Mobile Menu End -->

  </nav>
</header>

这是我的 application.js 文件

//= require rails-ujs
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require jquery.slick
//= require local-time
//= require summernote/summernote-bs4.min
//= require summernote-init
//= require social-share-button
//= require activestorage
//= require turbolinks
//= require_tree .

【参考方案1】：

您需要在导航栏图像中添加一个附加类以使其具有响应性。如果您使用的是 bootstrap 3，请使用 .img-responsive，如果是 bootstrap 4，请使用 .img-fluid。希望对您有所帮助！

【讨论】：

很遗憾没有帮助