Question

我的Bootstrap导航栏应该是粘性的，但事实并非如此。（我正在使用.sticky-top）我读了一些有关此问题的文章，但我不明白这种情况的发生方式和原因。（我不是很擅长bootstrap / CSS）。这是我的导航栏代码：

<header>
    <img class="col-md-12 d-none d-md-block" src="assets/banner website.png" alt="banner" width="1900">
    <img class="col-sm-12 d-mone d-block d-md-none img-fluid" src="assets/banner website tel.png" alt="banner4phones" widht="100%">
    <nav id="navbar" style="overflow: hidden;" class="navbar navbar-expand-md bg-dark navbar-dark">
        <a class="navbar-brand" href="#"><img src="assets/Het logo der logo's voor nav.png" alt="logo" width="40px;"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div style="position: relative; z-index: 3000" class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item fade-in <?php echo ($page == 'home' ? 'active' : ''); ?>"><a href="<?php echo ($page == 'home' ? 'javascript:void(0)' : 'https://jinvantongeren.nl'); ?>" class=" nav-link">Hoofdpagina</a></li>
                <li class="nav-item fade-in <?php if($page=='contact'){echo 'active';}?>"><a href="<?php echo ($page == 'contact' ? 'javascript:void(0)' : 'https://jinvantongeren.nl/contact.php'); ?>" class="nav-link">Contact</a></li>
                <li class="nav-item fade-in <?php if($page=='over'){echo 'active';}?>"><a href="<?php echo ($page == 'over' ? 'javascript:void(0)' : 'https://jinvantongeren.nl/over'); ?>" class="nav-link">Over</a></li>
                <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="javascript:void(0)" id="navbardrop" data-toggle="dropdown">Vakken</a>
                    <div style="position: absolute; z-index: 1000;" class="overflow-auto dropdown-menu">
                        <a class="dropdown-item <?php if($page=='Biology'){echo 'active';}?>" href="<?php echo ($page == 'Biology' ? 'javascript:void(0)' : 'https://jinvantongeren.nl/Biology'); ?>">Biology</a>
                        <a class="dropdown-item <?php if($page=='Assignment'){echo 'active';}?>" href="<?php echo ($page == 'Assignment' ? 'javascript:void(0)' : 'https://jinvantongeren.nl/assignment'); ?>">English</a>
                        <a class="dropdown-item <?php if($page=='ICT en Design'){echo 'active';}?>" href="<?php echo ($page == 'ICT en Design' ? 'javascript:void(0)' : 'https://jinvantongeren.nl/Website opdracht/index.html'); ?>">ICT en Design</a>
                    </div>
                </li>
            </ul>
            <ul class="navbar-nav ml-auto">
                <?php if(isset($_SESSION['User'])){ 
                        if($statusImg == 1) { ?>
                             <img src="assets/profile/profileimg <?php echo $userName ?>.<?php echo $fileactualext ?>" class="img-fluid rounded-circle navbar-brand" style="width: 40px; height: 40px;" alt="profielfoto" />
                <?php } } ?>
                <?php if(isset($_SESSION['User'])) { ?>
                <li class="nav-item <?php if($page=='control'){echo 'active';}?>">
                        <?php if(in_array('Admin', $explodeGroep)) { ?>
                        <a href="https://jinvantongeren.nl/control?groep=<?php echo htmlspecialchars(join(', ', $explodeGroep)); ?>&uid=<?php echo $userName ?>" class="nav-link">Beheer</a>                    
                </li>  <?php } } ?>                <?php if(isset($_SESSION['User'])) { ?>
                <li class="nav-item <?php if($page=='exclusive'){echo 'active';}?>">
                    <a href="https://jinvantongeren.nl/exclusive?groep=<?php echo htmlspecialchars(join(', ', $explodeGroep)); ?>&uid=<?php echo $userName ?>" class="nav-link">Mijn content</a>                    
                </li><?php }?>
                <?php if(isset($_SESSION['User'])) { ?>
                <li class="nav-item <?php if($page=='Personal'){echo 'active';}?>">
                    <a href="https://jinvantongeren.nl/personal?uid=<?php echo $_SESSION['User']; ?>" class="nav-link">Mijn account</a>                 
                </li>    
                <?php }?>
                <li class="nav-item">
                    <?php if(isset($_SESSION['User'])) { ?>
                        <form class="form-inline" method="post" action="includes/logout.inc.php">
                            <button class="btn-primary btn" type="submit" name="Logout">Uitloggen</button>
                        </form> 
                    <?php } ?>
                </li>
                <?php if(!isset($_SESSION['User'])) { ?>
                <li class="nav-item <?php if($page=='Login'){echo 'active';}?>">
                    <a href="https://jinvantongeren.nl/login" class="nav-link">Inloggen</a>
                </li>
                <?php } ?>
            </ul>
        </div>
        </nav>
</header>

我尝试使用最新版本的引导程序（4.3.1）解决此问题，但这没用。

有人知道解决方案吗？

Answer 1

您是否尝试过将其添加到标题<header class="fixed-top">或只是将固定位置添加到元素？您可能在某个地方覆盖了CSS，但这很难说。如果您可以提供链接或更多信息，则可能会有所帮助。希望这会有所帮助。

div下面的bootstrap下拉列表

1 个答案: