Question

我想在我的页面上看到一个完整的导航栏菜单，但是有些不对劲我很难过。此外，图标（主页，联系人）下拉菜单 - 图标。不在一条线上。也许它是一个补充问题，但我使用我的笔记本电脑，而不是手机或smt。我不知道是什么问题，为什么我把完全添加部分与bootstrap。超过2天我找不到答案。我确定这实际上是一个简单的答案，但我对这个东西很新。

这是我的application.html.erb代码：

<html>
  <head>
    <title></title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" 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="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

<%= yield %>

This is what a add on my Gemfile: 
gem 'bootstrap', '~> 4.0.0.beta'

This is my application.scss: 
@import "bootstrap";

This is my application.js: 
// = require rails-ujs
// = require turbolinks
// = require_tree .

= require jquery3
= require popper
= require bootstrap-sprockets (I dont know should i use a comment or not, but last 3 strings from githab/twbs/bootstrap-rubygem without comment)

And that what i have: [enter image description here][1]

I wanna see a full version of navbar, but something wrong i think. Help to young developer, please!

Answer 1

您使用了错误的课程。您正在使用bootstrap 4 alpha类，但需要使用bootstrap 4 beta类。这将是bootstrap 4 beta中导航栏的示例：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <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>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Rails上的Bootstrap工作错误或没有。全屏短导航栏

1 个答案: