Padding/Margin/shadows 在桌面视图中消失但在检查中显示。错误在所有屏幕尺寸上都存在

Question

我正在为学校制作一个样例作品集网站，前端无疑是我的工作周。当我正常加载网站时，它不显示任何填充或边距，但当我使用最大尺寸检查到断点时，它看起来好多了，有边距和填充以及更好的阴影。

 CSS 
     .neumorphicDefault {
        background-color: transparent;
        box-shadow:  0.5rem 0.5rem 1rem #d1d9e6,
                     -0.5rem -0.5rem 1rem #ffffff;
        text-decoration: none;
        margin: 1rem;
        text-align: center;
    }



 .neumorphicActive {
        background-color: transparent;
        box-shadow:  inset 5px 5px 10px #d1d9e6,
                     inset -5px -5px 10px #ffffff;
        text-decoration: none;  
        margin: 1rem;
        padding: 1rem;
    }

<!-- HTML -->
    <div class="container-fluid" id="cover">
    <!-- NAVIGATION -->
        <div class="d-flex justify-content-center">
            <nav class="navbar navbar-expand-sm">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon">
                        <i class="fa-solid fa-burger align-middle"></i>
                    </span>
                </button>
                <div class="collapse navbar-collapse">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link rounded-pill text-custom-gray neumorphicActive" href="#portfolio">Portfolio</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link rounded-pill text-custom-gray neumorphicDefault" href="#about">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link rounded-pill text-custom-gray neumorphicDefault" href="#projects">Gallery</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link rounded-pill text-custom-gray neumorphicDefault" href="#contact">Contact</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
        
        <!-- WELCOME SECTION -->
        <div class="container-fluid ms-lg-5 mt-5 p-sm-5 welcomeSection">
            <div class="row">
                <div class="col-8">
                    <div class="text-custom-gray m-1" style="font-size: 5vw"> Hello, I am <span id="nameSpan">Chandler Renteria</span></div>
                    <div class="text-custom-gray  m-1" style="font-size: 5vw"> Full-Stack Developer</div>

                    <div class="d-flex">
                        <a  class="rounded-pill ms-0 mw-25 text-custom-gray neumorphicDefault" href="#portfolio">See My Work</a>
                        <a  class="rounded-pill mw-50 text-custom-gray neumorphicDefault" href="#contact">Start A Conversation</a>  
                    </div>              
                </div>  
                <div class="col welcomeGraphic">
                    <div class="graphic w-100">Placeholder</div>
                </div>
            </div>
        </div>
    </div>

Answer 1

尝试使用这个 cdn，你可能安装有问题

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

.neumorphicDefault {
        background-color: transparent;
        box-shadow:  0.5rem 0.5rem 1rem #d1d9e6,
                     -0.5rem -0.5rem 1rem #ffffff;
        text-decoration: none;
        margin: 1rem;
        text-align: center;
    }



 .neumorphicActive {
        background-color: transparent;
        box-shadow:  inset 5px 5px 10px #d1d9e6,
                     inset -5px -5px 10px #ffffff;
        text-decoration: none;  
        margin: 1rem;
        padding: 1rem;
    }

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!-- HTML -->
    <div class="container-fluid" id="cover">
    <!-- NAVIGATION -->
        <div class="d-flex justify-content-center">
            <nav class="navbar navbar-expand-sm">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon">
                        <i class="fa-solid fa-burger align-middle"></i>
                    </span>
                </button>
                <div class="collapse navbar-collapse">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link rounded-pill text-custom-gray neumorphicActive" href="#portfolio">Portfolio</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link rounded-pill text-custom-gray neumorphicDefault" href="#about">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link rounded-pill text-custom-gray neumorphicDefault" href="#projects">Gallery</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link rounded-pill text-custom-gray neumorphicDefault" href="#contact">Contact</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
        
        <!-- WELCOME SECTION -->
        <div class="container-fluid ms-lg-5 mt-5 p-sm-5 welcomeSection">
            <div class="row">
                <div class="col-8">
                    <div class="text-custom-gray m-1" style="font-size: 5vw"> Hello, I am <span id="nameSpan">Chandler Renteria</span></div>
                    <div class="text-custom-gray  m-1" style="font-size: 5vw"> Full-Stack Developer</div>

                    <div class="d-flex">
                        <a  class="rounded-pill ms-0 mw-25 text-custom-gray neumorphicDefault" href="#portfolio">See My Work</a>
                        <a  class="rounded-pill mw-50 text-custom-gray neumorphicDefault" href="#contact">Start A Conversation</a>  
                    </div>              
                </div>  
                <div class="col welcomeGraphic">
                    <div class="graphic w-100">Placeholder</div>
                </div>
            </div>
        </div>
    </div>

Padding/Margin/shadows 在桌面视图中消失但在检查中显示。错误在所有屏幕尺寸上都存在

Padding/Margin/shadows disappear in desktop view but show in inspect. Bug persists across all screensizes

html

css

twitter-bootstrap

bootstrap-5