Question

我在rails 5中使用bootstrap 4 carousel作为我网站的背景。我有一个带药丸的导航栏，它链接到页面的不同部分。页面加载时一切正常，直到第一个图像转换到下一个图像。然后导航栏上的药丸消失，当我点击链接时，他们不会导航到应该页面的特定部分。

我认为这可能是因为当图像过渡时，它不仅会转换为背景图像，还会转换整个内容（即使内容保持不变），并且它仍然链接到初始页面的内容。（因此它似乎无法重新链接到＆＃34;新的＆＃34;内容。）

这是我的代码：

index.html.erb

<% image_array = [] %> <!--Array of image paths, i.e. [image_path(''), image_path('')]-->
 <% @images.each do |image| %>
     <% image.slice! 'app/assets/images/' %>
     <% image_array.push(image_path(image)) %>
 <% end %>

<div id="carousel-images" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
        <div class="carousel-item active" style="background: url(<%= image_path image_array[0] %>) 
            no-repeat center center fixed; 
            background-position: 50% 0;
            height: 100%;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            background-size: cover;
            -o-background-size: cover;">
            <div class="transparent"></div>
            <%= render 'content' %>
        </div>


        <% image_array.delete_at(0) %>

        <% image_array.each do |image| %>
            <div class="carousel-item" style="background: url(<%= image_path image %>) 
            no-repeat center center fixed; 
            background-position: 50% 0;
            height: 100%;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            background-size: cover;
            -o-background-size: cover;">
            <div class="transparent"></div>
                <%= render 'content' %>
            </div>
        <% end %>
    </div>
</div>

welcome_controller.rb

class WelcomeController < ApplicationController
  def index
    @images = Dir.glob("app/assets/images/*")
  end
end

_navigationbar.html.erb（从application.html.erb呈现，未显示）

<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
    <!-- Brand -->
   <!-- <a class="navbar-brand" href="#">League Builders</a>-->

    <!-- Links -->
    <div id="myNavbar">
        <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
        <div class="collapse navbar-toggleable-md" id="navbarResponsive">
            <ul class="nav nav-pills navbar-nav" id="nav-colors">
                <li class="nav-item"><a class="nav-link" href="#home"><b>League</b><i>Builders</i></a></li>
                <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
                <li class="nav-item"><a class="nav-link" href="#features">Features</a></li>
                <li class="nav-item"><a class="nav-link" href="#contact">Contact Us</a></li>
            </ul>
        </div>
    </div>
</nav>

Answer 1

我发现这是因为我在旋转木马部分内部有内容，所以每次渲染内容。我拿出了内容，但是当我这样做时，背景并没有显示出来。似乎背景的100％覆盖适用于它将包含的内容，所以我只是将背景图像调整到特定的像素高度，以便它将填满整个屏幕。（这是一种单调乏味的方法，我不确定是否有更好的方法，但是在玩完它之后这种方法很有效。）

Bootstrap Carousel在转换后禁用导航栏

1 个答案: