html - Navbar 切入 Carousel 图片

Question

看来我遇到了问题，我不确定下一步该怎么做。我想我已经在 CSS 的位置、边距、填充等问题上撞墙了。

我只需要将我的旋转木马移动到我的导航栏下方，同时让它们保持固定...有什么想法吗？

代码:

.carousel-inner .carousel-item {
  width: 100%;
  height: 500px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.hero1 {
  background: url(hero.jpg) no-repeat center center fixed; 
}
.hero2 {
  background: url(hero2.jpg) no-repeat center center fixed; 
}
.hero3 {
  background: url(hero3.jpg) no-repeat center center fixed; 
}

.navbar {
  font-family: "Helvetica Neue", Helvetica;
  font-weight: 200;
  box-shadow: 0px 1px 3px #2a2a2a;
}

.navbar-inverse a.navbar-brand {
  font-family: "Helvetica Neue", Helvetica;
  font-weight: 100;
  color: white;
}

    <div id="carousel" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="1"></li>
        <li data-target="#carousel" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="carousel-item hero1 active">
          <img class="d-block img-fluid">
        </div>
        <div class="carousel-item hero2">
          <img class="d-block img-fluid">
        </div>
        <div class="carousel-item hero3">
          <img class="d-block img-fluid">
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

https://github.com/peterbehere/christ_the_king_fellowship_app.git

Answer 1

更新:我想通了!首先，我完全删除了指向我的图像的 CSS。然后，我用 rails image_tag 助手替换了 html img 类。这现在有效了!

  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <%= image_tag "hero.jpg", :id =>"hero1",  :class =>"d-block img-fluid" %>
    </div>
    <div class="carousel-item">
      <%= image_tag "hero2.jpg", :id =>"hero2",  :class =>"d-block img-fluid" %>
    </div>
    <div class="carousel-item">
      <%= image_tag "hero3.jpg", :id =>"hero3",  :class =>"d-block img-fluid" %>
    </div>