Question

我有以下导航栏代码： -

  <nav class="navbar navbar-inverse">
<div class="container">
  <ul class="navbar-form navbar-left">
    <% if current_user %>
      <li class="nav-item pull-right add-space">Signed in as  <%= current_user.name %> - <%= image_tag @auth['info']['image'],
        width: '32', height: '32', class: 'nav-logo' %></li>
      <li class="nav-item pull-right add-space"><%= link_to "Sign out    ", '/sign_out', method: :delete, class: 'nav-link' %></li>
    <% else %>
      <li class="nav-item pull-right add-space"><%= link_to image_tag("GitHub-Mark-Light-32px.png"), "auth/github", class: "nav-link"%></li>
      <li class="nav-item pull-right add-space"><%= link_to image_tag("twitter-32-1.png"), "auth/twitter", class: "nav-link" %></li>
      <li class="nav-item pull-right add-space"><%= link_to image_tag("facebook-2-32.png"), "auth/facebook", class: "nav-link" %></li>
    <% end %>
  </ul>
      <div id="navbar" class="navbar-collapse collapse">
        <form class="navbar-form navbar-right">
          <div class="form-group">
            <input type="text" placeholder="Email" class="form-control">
          </div>
          <div class="form-group">
            <input type="password" placeholder="Password" class="form-control">
          </div>
          <button type="submit" class="btn btn-success">Sign in</button>
        </form>
      </div><!--/.navbar-collapse -->
</div>

我对使用bootstrap CSS类的样式感到困惑。你会看到我在UL标签上使用了navbar-form navbar-left类，因为没有这个我在LI标签中的图像是顶部对齐的并且看起来不合适。这有一个意想不到的后果，但我的退出＆＃39;链接现在与顶部及其蓝色对齐（而不是白色，很可能是因为导航链接类）而且＆＃39;签名为＆＃39;文本几乎不可读，因为它的类型灰了。

我确信有一些风格应该可以使用，但我已经尝试了不少，我想知道是否有人可以帮忙吗？

由于

Answer 1

我在doc中看不到任何nab-form或nav-item。

ul应该有nav navbar-nav课程，li不应该有。{/ p>

您可以使用Navbar template for Bootstrap

启动菜单

Answer 2

nav-item用于Bootstrap 4导航栏，因此请确保您指向4.x版本。

Answer 3

这是导航栏的代码，主要问题是图标上的间距看起来有点奇怪，而且＆＃39;签名为＆＃39;文字不可读+

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
  <link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
  <div class="container-fluid">
        <!-- Static navbar -->
        <nav class="navbar navbar-inverse">
          <div class="container-fluid">
            <div id="navbar" class="navbar-collapse collapse">
            <ul class="navbar-form navbar-left">
                <% if current_user %>
                <li class="nav-link pull-right add-space">Signed in as  <%= current_user.name %> - <%= image_tag @auth['info']['image'],
  width: '32', height: '32', class: 'nav-logo' %></li>
                <%else%>
                <%end%>
            </ul>
              <div id="navbar" class="navbar-collapse collapse">
                <form class="navbar-form navbar-right">
                  <div class="form-group">
                    <input type="text" placeholder="Email" class="form-control">
                  </div>
                  <div class="form-group">
                    <input type="password" placeholder="Password" class="form-control">
                  </div>
                  <% if current_user %>
                    <li class="nav-item pull-right add-space"><%= link_to "Sign out    ", '/sign_out', method: :delete, class: 'btn btn-success' %></li>
                  <% else %>
                  <button type="submit" class="btn btn-success">Sign in</button>
                  <li class="nav-item pull-right add-space"><%= link_to image_tag("GitHub-Mark-Light-32px.png"), "auth/github", class: "nav-link"%></li>
                  <li class="nav-item pull-right add-space"><%= link_to image_tag("twitter-32-1.png"), "auth/twitter", class: "nav-link" %></li>
                  <li class="nav-item pull-right add-space"><%= link_to image_tag("facebook-2-32.png"), "auth/facebook", class: "nav-link" %></li>
                          <%end%>
                </form>
              </div><!--/.navbar-collapse -->
            </div><!--/.nav-collapse -->
          </div><!--/.container-fluid -->
  </nav>

  <div class="container">
      <div class="row">
        <div class="col-sm-12">
        <% flash.each do |key, value| %>
          <div class="alert alert-info alert-dismissible"><%= value %></div>
        <% end %>
          </div>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-12">
      <% if current_user %>
        <div class="text-center">
          <h1>Welcome, you are logged in with <strong><%= @auth['provider'].capitalize %></strong></h1>
        </div>
      <% end %>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-12">
      <%= yield %>
    </div>
  </div>
</div>
</body>
</html>

Navbar（引导程序）样式

3 个答案: