Question

我试图将bootstrap实现到我的ror应用程序中。出于某种原因，我的导航并不是并排的，它们堆叠在顶部。

有什么建议吗？

<nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <%= link_to "Smart Health", root_path, class: "navbar-brand" %>
                </div>
                <ul class="nav navbar-nav">
                    <li><%= link_to "Register Doctor", sign_up_path %></li>
                    <% if signed_in? %> 
                        <li><%= link_to "Sign out", sign_out_path, method: :delete %></li>
                    <% else %> 
                        <li><%= link_to "Login", sign_in_path %></li>
                    <% end %>
                </ul>

                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                            Sort by Condition<span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu" role="menu">

                        </ul>
                    </li>
                    <% if signed_in? %>
                        <li><%= link_to "Your Patients", patients_path(user_id: current_user.id), class: "link"%></li>
                    <% end %>

                    <% if signed_in? %>
                        <li><%= link_to "Add Patient", new_patient_path %></li>
                    <% end %>
                </ul>
            </div>
        </nav>

Answer 1

如果您使用bootstrap 4

，请尝试此操作

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <%= link_to "Smart Health", root_path, class: "navbar-brand" %>

  <ul class="navbar-nav mr-auto">
    <li class="nav-item">
      <%= link_to "Register Doctor", sign_up_path, class: "nav-link" %>
    </li>

    <% if signed_in? %> 
      <li class="nav-item"><%= link_to "Sign out", sign_out_path, method: :delete, class: "nav-link" %></li>
    <% else %> 
      <li class="nav-item"><%= link_to "Login", sign_in_path, class: "nav-link" %></li>
    <% end %>
  </ul>


  <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"> Sort by Condition</a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">Action</a>
      </div>
    </li>

    <% if signed_in? %> 
      <li class="nav-item"><%= link_to "Your Patients", patients_path(user_id: current_user.id), class: "nav-link" %></li>
    <% else %> 
      <li class="nav-item"><%= link_to "Add Patient", new_patient_path, class: "nav-link" %></li>
    <% end %>
  </ul>
</nav>

Bootstrap和ROR - 导航不是水平的

1 个答案: