Bootstrap 3 -> 4 выпуска

Question

Я пытаюсь обновить код, который работал с некоторой итерацией Bootstrap версии 3. Сейчас я нацеливаюсь на версию 4.3.1. Я пытаюсь изменить этот код навигационной панели, но так как навигационная панель капитального ремонта была сильно переработана с 3-> 4, у меня много проблем.

Я прочитал ... https://getbootstrap.com/docs/4.0/migration/ Который переходит на миграцию на v4, но все еще не может заставить его работать

<nav class="navbar navbar-light navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" style="margin-top:17px; background-color:white; opacity: 0.7;">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <%=link_to image_tag("logo.svg", size:"150x59"), store_index_path, :class => "navbar-brand", method: :get %>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" >
        <ul class="nav navbar-nav">
          <li><%= link_to t('.questions'), store_index_path, class: "navbar_main_links" %></li>
          <li><%= link_to t('.news'), store_index_path, class: "navbar_main_links" %></li>
          <li><%= link_to t('.contact'), store_index_path, class: "navbar_main_links" %></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Cog_font_awesome.svg/512px-Cog_font_awesome.svg.png" alt="gear"> </a>
            <ul class="dropdown-menu">
              <% if session[:user_id] %>
                <li><%= link_to "Orders", orders_path, class: "navbar_main_links" %></li>
                <li role="separator" class="divider"></li>
                <li><%= link_to "Products", products_path, class: "navbar_main_links" %></li>
                <li role="separator" class="divider"></li>
                <li><%= link_to "Users", users_path, class: "navbar_main_links" %></li>
                <li role="separator" class="divider"></li>
                <li><%= link_to "Logout", logout_path, method: :delete, class: "navbar_main_links" %></li>
              <% else %>
                <li><%= link_to "Login", login_path, class: "navbar_main_links" %></li>
              <% end %>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><img src="https://image.flaticon.com/icons/png/512/61/61027.png" alt="gear" id="navbar_image_locale"> </a>
            <ul class="dropdown-menu">
              <% LANGUAGES.each_with_index do |language, index|%>
                <li><a href=""><%= link_to language[0].to_s, store_index_url(locale: language[1]), class: "navbar_main_links" %></a></li>
                <% if index != LANGUAGES.size-1 %>
                  <li role="separator" class="divider"></li>
                <% end %>
              <% end %>
            </ul>
          </li>
        </ul>
        <form class="mx-2 my-auto d-inline w-100">
          <%= form_tag(store_index_path, method: :get) do %>
            <%= text_field_tag :search, '', class: 'form-control border border-right-0' %>
            <%= image_submit_tag "https://cdn1.iconfinder.com/data/icons/flat-web-browser/100/search-512.png", id: "navbar_search_image_submit" %>
          <% end %>
        </form>
      </div>
    </div>
  </nav>

Я изменил некоторые вещи, но все равно при отображении этого он будет просто показывать файл изображения из кода ERB и флажок, который после нажатия будет использовать кнопку раскрывающегося списка.

Я почти уверен, что просто использую устаревший класс или что-то в этом роде, но я не могу этого понять.

Любая помощь приветствуется:)

Answer 1

Ошибка миграции.

Как вы уже догадались, большинство используемых вами предложений недоступно в версии 4. Я думаю, вам следует скопировать шаблон из начальной загрузки и использовать его. Или, если вы используете редактор, такой как Intellij, проверьте, существует ли имя используемого вами класса в версии 4.

---

Это макет, похожий на ваш.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
 <a class="navbar-brand" href="#">
    <img src="" width="30" height="30" alt="">
  </a>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
          <li class="dropdown-item">Action</li>
          <li class="dropdown-item" >Another action</li>
          <li class="dropdown-divider"></li>
          <li class="dropdown-item">Something else here</li>
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
          <li class="dropdown-item">Action</li>
          <li class="dropdown-item" >Another action</li>
          <li class="dropdown-divider"></li>
          <li class="dropdown-item">Something else here</li>
        </ul>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

https://codepen.io/anon/pen/mYZjNv