Question

我对为什么下一节从那里开始感到完全困惑。我正在使用Bootstrap进行布局。
我的英雄形象下有一个服务区，但是当我在服务下开始下一个部分时，它又在英雄形象下开始，我不知道为什么。

在我的服务部分，我有4行和两个列。
所以我尝试添加另一行并将其放在下一节中，它确实起作用了，但是我不想要那样。

html文件


<div class="nav-wrapper">
    <input type="checkbox" id="nav-tlg" class="hidden">
    <label for="nav-tlg" class="nav-btn">
        <i></i>
        <i></i>
        <i></i>
      </label>
  <div class="logo">
      <h1>LOGO    </h1>
  </div>

  <nav>
<a href="#" id="collections-link">
  <div class="letter">H</div>
  <div class="letter">o</div>
  <div class="letter">m</div>
  <div class="letter">e</div>
</a>
<a href="#" class="active" id="new-link">
  <div class="letter">S</div>
  <div class="letter">e</div>
  <div class="letter">r</div>
  <div class="letter">v</div>
  <div class="letter">i</div>
  <div class="letter">c</div>
  <div class="letter">e</div>
  <div class="letter">s</div>
</a>
<a href="#" id="trending-link">
  <div class="letter">P</div>
  <div class="letter">o</div>
  <div class="letter">r</div>
  <div class="letter">t</div>
  <div class="letter">f</div>
  <div class="letter">o</div>
  <div class="letter">l</div>
  <div class="letter">i</div>
  <div class="letter">o</div>
</a>
<a href="#" id="popular-link">
  <div class="letter">B</div>
  <div class="letter">l</div>
  <div class="letter">o</div>
  <div class="letter">g</div>
</a>  
</nav>
</div>


<!-- Hero Image -->

  <div id="hero-container">
    <div class="hero-content flex-center">
        <h1>
           <span>REFRESH</span> YOUR WEBSITE
          </h1>
    </div>
  </div>
  <section>
  <div class="services- container-fluid" id="service-container">
    <div class="row  srv-content">
      <div class="col-lg-5 col-sm-12 text-center">
        <h1 class="srv-heading">Minimal Design</h1>   <p class="srv-subheading">LESS is MORE</p>

        <p class="srv-info">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus, inventore ut optio cumque similique
        </p>
      </div>
      <div class="col-lg-7 col-sm-12">
        <img class="img-fluid" src="../assets/imgs/service/minimal-web-design-site.jpg" alt="">
      </div>
    </div>

    <div class="row  srv-content">
        <div class="col-lg-7 col-sm-12">
            <img class="img-fluid" src="../assets/imgs/service/minimal-web-design-site.jpg" alt="">
          </div>
      <div class="col-lg-5 col-sm-12 text-center">
        <h1 class="srv-heading">SEO Ready</h1>   <p class="srv-subheading">LESS is MORE</p>

        <p class="srv-info">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus, inventore ut optio cumque similique
        </p>
      </div> 
    </div>

    <div class="row  srv-content">
        <div class="col-lg-5 col-sm-12 text-center">
          <h1 class="srv-heading">Superfast Page Load</h1>   <p class="srv-subheading">LESS is MORE</p>

          <p class="srv-info">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus, inventore ut optio cumque similique
          </p>
        </div>
        <div class="col-lg-7 col-sm-12">
          <img class="img-fluid" src="../assets/imgs/service/minimal-web-design-site.jpg" alt="">
        </div>
      </div>

      <div class="row  srv-content">
          <div class="col-lg-7 col-sm-12">
              <img class="img-fluid" src="../assets/imgs/service/minimal-web-design-site.jpg" alt="">
            </div>
        <div class="col-lg-5 col-sm-12 text-center">
          <h1 class="srv-heading">Lead Generation</h1>   <p class="srv-subheading">LESS is MORE</p>

          <p class="srv-info">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus, inventore ut optio cumque similique
          </p>
        </div> 
      </div>  
  </div>
</section>


<!--Why work with us comparison section-->

<section class="container-fluid">
  <div class="row">
    <h1>hjdfhsldjf</h1>
  </div>
</section>

css文件

#hero-container{
    background-image: url('../assets/imgs/heroimage.gif');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;
    .hero-content{

        h1{
            color: black;
            position: absolute;
            top: 25%;
            font-size: 4vw;
            span{
                color: green;
                font-weight: bold;

            }
        }
    }

}

.services-{
    height: 50vh;
    padding-top: 150px;
    padding-bottom: 40px; 

    .srv-content{
        padding-top: 7%;
        padding-bottom: 7%;

        .srv-heading{
            font-weight: bold;
            margin-top: 100px;
            padding: 0 5px;
        }

        .srv-subheading{
            margin-top: 5px;
            font-size: 15px;
        }
        .srv-info{
            margin-top: 45px;
            padding: 40px; 
            font-size: 20px;
            font-weight: 400;
        }
    }
}

并且我想在其下添加下一部分，但它不起作用

Answer 1

非常小的错误。您已将services-的高度限制为50vh。

.services- {
    height: 50vh;
}

我猜你打算给srv-content设置50vh的高度。

还要进行奖金编辑，使您的hero-container相对位置，以使您的h1内部（绝对位置）不会脱离hero-container。

Here是一个带有评论的小提琴。

Answer 2

在此处输入图片描述

css代码

#hero-container{
    background-image: url('../assets/imgs/heroimage.gif');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;   
}
.hero-content  h1{
            color: black;
            position: absolute;
            top: 25%;
            font-size: 4vw;  
}
 .hero-content h1span{
                color: green;
                font-weight: bold;

            }

.services-{
    height: 50vh;
    padding-top: 150px;
    padding-bottom: 40px; 
}



    .srv-content{
        padding-top: 7%;
        padding-bottom: 7%; 
    }

       .srv-heading{
            font-weight: bold;
            margin-top: 100px;
            padding: 0 5px;
        }

        .srv-subheading{
            margin-top: 5px;
            font-size: 15px;
        }
        .srv-info{
            margin-top: 45px;
            padding: 40px; 
            font-size: 20px;
            font-weight: 400;
        }

如何修复上一节的开头部分？

2 个答案: