rails应用程序中bootstrap轮播滑块底部的不需要的空白区域？

Question

我有一些代码用于着陆页，其中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>

这是我的coffeescript：   landing.coffee

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

AND 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;
}

coffeescript似乎根本不会影响页面，因为白色空间存在或不存在。任何人都可以帮助建议如何摆脱页面底部的空白区域？这个coffeescript是否必要？