时间戳

首页 > 解决方案 > rails应用程序中引导轮播滑块底部不需要的空白？

javascript - rails应用程序中引导轮播滑块底部不需要的空白？

问题描述

我有一些登陆页面的代码，其中包含通过轮播更改的 4 张图片：

<div class="row">
  <div class="col-12 welcome d-flex align-items-center justify-content-center" >
    <div class="welcome-slider">
      <div class="carousel slide">
        <div class="carousel-inner">

          <div class="carousel-item active">
              <%= image_tag 'Eureka.jpg', class: 'd-block w-100' %>
          </div>

          <div class="carousel-item">
            <%= image_tag 'pensive.jpg', class: 'd-block w-100' %>
          </div>


          <div class="carousel-item">
            <%= image_tag 'NYC.jpg', class: 'd-block w-100' %>
          </div>

          <div class="carousel-item">
            <%= image_tag 'Success.jpg', class: 'd-block w-100' %>
          </div>


        </div>
      </div>
    </div>

    <div class="comingsoon">
        <h1 class="font-white"> Coming soon </h1>
    </div>

  </div>
</div>

这是我的咖啡脚本：landing.coffee

    $(document).on "turbolinks:load", ->
      $('.carousel').carousel()

和 static_pages.coffee

$item = $('.carousel-item')
$wHeight = $(window).height()
$item.height $wHeight
$item.addClass 'full-screen'
$('.carousel img').each ->
  $src = $(this).attr('src')
  $color = $(this).attr('data-color')
  $(this).parent().css
    'background-image': 'url(' + $src + ')'
    'background-color': $color
  $(this).remove()
  return
$(window).on 'resize', ->
  $wHeight = $(window).height()
  $item.height $wHeight
  return

相关CSS：

.full-screen {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

咖啡脚本似乎根本不影响页面，因为无论有没有它，空白都存在。谁能帮助建议如何摆脱页面底部的空白？这个咖啡脚本有必要吗？

标签： javascriptcssruby-on-railstwitter-bootstrapcoffeescript

解决方案

推荐阅读