Question

看起来我遇到了问题，我不确定下一步。我想我已经用位置，边距，填充等方式击败了css墙。

我只需要将我的旋转木马移动到我的导航栏下方，然后将它们保持固定......任何想法？

代码：

＆＃13;

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

＆＃13;

    <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>

＆＃13;

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

Answer 1

更新：我明白了！首先，我完全删除了指向我的图像的CSS。然后，我用rails image_tag helpers替换了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>

Navbar切入Carousel图像

1 个答案: