Question

我的问题是，固定的引导程序导航覆盖了页面的60px（导航的高度），因此它在操作我所拥有的列的“填充”时发生了错误。

我尝试在.section上放置页边距：60px，但它只是将页面下推60px，而不是将页面尺寸调整为60px。而是在底部隐藏了60px。

在列上没有定义padding-top / bottom。它们用display：flex和align-items：center定义，其中的div包含文本，因此它将一直居中。

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'
});

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

1 个答案: