Question

我知道这里有几个棘手的问题，但是我还没有找到解决方案。这是我的代码：

<body <?php body_class(); ?>>
<div class="container">

    <header class="header-container text-center">

        <div class="social-menu" style="height: 20%">
            <h3><i class="fa fa-facebook-square"> </i> <i class="fa fa-instagram"> </i> <i class="fa fa-twitter-square"> </i> <i class="fa fa-youtube-square"></i></h3>
        </div>

        <div class="header-content table" style="height: 60%">
            <div class="table-cell">
                <div class="logo-image"></div>
                <h1 class="site-title"><span class="d-none"><?php bloginfo('name'); ?></span></h1>
                <!-- add hidden title for SEO -->
                <h2>Španski Metar</h2>

            </div>
        </div>

        <div class="nav-container">
            <nav class="navbar sticky-top navbar-expand-lg is-sticky navbar-light navbar-spanski">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="<?php esc_html_e( 'Toggle Navigation', 'spanski_metar' ); ?>">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse justify-content-center" id="navbar-content">
                    <?php
                    wp_nav_menu([
                    'menu'            => 'main_menu',
                    'theme_location'  => 'main_menu',
                    'menu_id'         => false,
                    'menu_class'      => 'navbar-nav mr-auto',
                    'depth'           => 2,
                    'fallback_cb'     => 'nav_walker::fallback',
                    'walker'          => new nav_walker()
                    ]);
                    ?>
                    <!-- <div id="navsearch">
                    <form class="form-inline my-2 my-lg-0">
                        <input class="form-control-sm" style="padding-left:5px; border-style: solid; border-width: 1px;" type="search" placeholder="Pretraga" aria-label="Search">
                        <button class="btn my-2 my-sm-0" type="submit"><i class="fa fa-search"></i></button>
                    </form>
                    </div> -->
                </div>
            </nav>
            <div style="height: 1000px"></div>
        </div><!-- .nav-container -->

    </header>   

</div>

我发现粘性顶工作的唯一方法是将1000px高度的div放入导航容器div中。但这不是我想要的。有没有办法使导航栏保持在顶部并保持在页眉内？那不是最佳实践吗？

谢谢您的时间。

Answer 1

检查您的jquery和“ bootstrap.min.js”文件。他们没有正确上传

使用页面底部的脚本，并在正确的位置使用它们，首先使用jquery，然后进行引导

喜欢：

-jQuery-

-引导程序-

我该如何解决Bootstrap 4的sticky-top类无法在我的页面上运行的问题？

1 个答案: