Question

我正在尝试缩小Rails应用中的引导导航栏。我希望解决方案类似于此页面上的导航栏http://www.viegandmaagoe.dk/en/

我不确定我做错了什么但我的导航栏没有缩小滚动。

这是

的代码

app/application/_navbar.html.erb

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <!--<a class="navbar-brand" href="#">Circular</a>-->
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav navbar-right">
    <li><%=link_to "About", root_path(@root, :anchor => "about") %><span class="sr-only">(current)</span></li>
    <li><%=link_to "Ems", root_path(@root, :anchor => "ems") %></li>
    <li><%=link_to "Team", root_path(@root, :anchor => "team") %></li>
    <li><%=link_to "Contact", root_path(@root, :anchor => "contact") %></li>
  </ul>

</div><!-- /.navbar-collapse -->

以下是app/assets/javascript/application.js

中的代码

$(document).scroll(function() {
 if ($(document).scrollTop() > 50) {
 $('nav').addClass('shrink');
 } else {
 $('nav').removeClass('shrink');
 }
});

这是app/assets/stylesheets/navbar.scss

中的Css

nav.navbar{
 background-color:#fff;
 // Animation
 -webkit-transition: all 0.4s ease;
 transition: all 0.4s ease;
}


nav.navbar.shrink {
 min-height: 35px;
}

如果有人可以看一下并告诉我，那将是非常好的

提前致谢

Answer 1

您在部分结尾处缺少结束</nav>和</div>标记。如果你关闭它将会起作用：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <!--<a class="navbar-brand" href="#">Circular</a>-->
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav navbar-right">
    <li><%=link_to "About", root_path(@root, :anchor => "about") %><span class="sr-only">(current)</span></li>
    <li><%=link_to "Ems", root_path(@root, :anchor => "ems") %></li>
    <li><%=link_to "Team", root_path(@root, :anchor => "team") %></li>
    <li><%=link_to "Contact", root_path(@root, :anchor => "contact") %></li>
  </ul>

</div><!-- /.navbar-collapse -->
</div>
</nav>

Answer 2

Here您可以找到干净的scss代码。答案中的代码段使用完全带前缀的css结果（如果您通过grunt或gulp运行代码，则不应该使用该结果。

如果它对你不起作用，也许你应该创建一个示例来展示你当前的非收缩导航栏的样子，这样我就可以看到我需要设置哪些属性才能进行缩小过渡到工作

＆＃13;

$(document).scroll(function() {
  if ($(document).scrollTop() > 50) {
    $('nav').addClass('shrink');
  } else {
    $('nav').removeClass('shrink');
  }
});

＆＃13;

    body {
  min-height: 150vh; }

  .navbar-brand img {
    max-height: 120px;
    -webkit-transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
    .navbar-default.shrink .navbar-brand img {
      max-height: 45px; }
  @media (max-width: 767px) {
    .navbar-brand {
      float: none;
      display: inline-block;
      padding: 0 15px;   }
      .navbar-brand img {
        max-height: 45px;
        display: inline-block;
        margin: 15px auto;   }
}

.navbar-default .navbar-nav > li > a {
  line-height: 120px;
  -webkit-transition: line-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition: line-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: line-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: line-height 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
  @media (max-width: 768px) {
    .navbar-default .navbar-nav > li > a {
      line-height: initial;   }
}
.navbar-default.shrink .navbar-nav > li > a {
  line-height: 45px; }
  @media (max-width: 768px) {
    .navbar-default.shrink .navbar-nav > li > a {
      line-height: initial;   }
}

@media (max-width: 767px) {
  .navbar-default .navbar-toggle {
    margin: 20px 8px;   }
}

＆＃13;

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#"><img src="https://www.grouptravelvideos.com/images/client/00954/resources/you%20logo%20here.png" /></a>
      <!-- Brand and toggle get grouped for better mobile display -->
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="navbar">
    <ul class="nav navbar-nav navbar-right">
      <li><a href="/about"><span class="sr-only">(current))</span>About</a></li>
      <li><a href="/ems">Ems</a></li>
      <li><a href="/team">Team</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>

＆＃13;

在滚动中缩小Rails应用程序中的bootstrap导航栏

2 个答案: