html - 如何使fullpage.js 适合固定导航的页面？

Question

我的问题是我的固定 Bootstrap 导航覆盖了我页面的 60 像素(导航的高度)，因此它破坏了我拥有的列的“填充”。

我试图将 margin: 60px 放在 .section 上，但它只是将页面向下推 60px，而不是将页面大小调整 60px。相反，底部隐藏了 60px。

列上没有定义 padding-top/bottom。它们是用 display: flex 和 align-items: center 定义的，里面有一个包含文本的 div，所以它会一直居中。

https://jsfiddle.net/fmcq9wpn/7/

CSS:

.col-lg-6 {
        display: flex;
        align-items: center;

        .text {
            padding: 0 5%;
            h3 {
                font-weight: bold;
                padding-bottom: 10px;
            }
            p {
                line-height: 2.0;
            }
        }
    }

HTML:

<div class="section news">
        <div class="row">
            <div class="picture col-lg-6 col-md-6 col-12 col-sm-12">

            </div>
            <div class="col-lg-6 col-md-6 col-12 col-sm-12">
                <div class="text">

                    <p>Mandag 27. Januar, 2019</p>
                    <H3>COACHING-FOREDRAGSRÆKKE PÅ UNIVERSITET</H3>
                    <p>Har man lyst til at vide mere om coaching fra forskellige, faglige perspektiver, arrangerer
                        professor
                        Reinhardt Stelter en foredragsrække på . . .</p>
                    <br> <button>Læs mere</button>
                </div>
            </div>

        </div>

        <div class="row">
            <div class="news-box col-lg-6 col-md-6 col-12 col-sm-12">
                <div class="text">
                    <p>Torsdag 5. Februar, 2019</p>
                    <h3>SIKKEN FEST!</h3>
                    <p>Tak til alle gæster, som kom og fejrede det nye års ankomst sammen med os! Det blev en
                        vidunderlig
                        fredag . . .</p><br>
                    <button>Læs mere</button>
                </div>
            </div>
            <div class="picture col-lg-6 col-md-6 col-12 col-sm-12">

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

<nav class="navbar fixed-top navbar-light bg-light">
    <a class="navbar-brand" href="#">Cpenhagen Coaching Center</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      Menu <i class="fas fa-bars"></i>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" data-proofer-ignore href="/#home">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-proofer-ignore href="/#education">Education</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-proofer-ignore href="/#testimonial">Testimonial</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-proofer-ignore href="/#news">News</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-proofer-ignore href="/#signup">Sign up</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-proofer-ignore href="/#footer">Footer</a>
          </li>
      </ul>
    </div>
  </nav>

这就像 .section 总是和窗口一样大。

我这里有一张照片:https://ibb.co/BgskKSb显示布局。

Answer 1

使用 fullpage.js 选项 paddingTop。例如:

new fullpage('#fullpage', {
   paddingTop: '60px'
});