html - 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 中不可用。我认为您应该从 bootstrap 复制模板并使用它。或者，如果您使用的是像 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