如何仅移除Bootstrap导航栏padding 保留其他元素padding设置

你的样式不生效有两个核心原因：

• padding 属性不支持 none 作为属性值，你写的 padding: none !important; 属于无效CSS规则，会被浏览器直接忽略，既覆盖不了Bootstrap给.navbar自带的默认内边距，也没法实现清零效果。
• 你给body设置的padding: 10px是作用在body元素自身的内边距，这个内边距会把body内所有子元素从视口边缘往内推10px。就算你把导航栏自身的内边距改成0，它还是会被body的内边距挡住，没法紧贴页面边缘。

两种方案选其一即可：

方案1：快速修复（最小改动） #

修正.navbar-custom的无效规则，用负margin抵消body的内边距影响：

.navbar-custom {
    background-color: #0e47b0;
    width: 100% !important;
    white-space: nowrap;
    padding: 0 !important; /* 替换原来的无效值none，清零导航栏自身内边距，覆盖Bootstrap默认样式 */
    /* 负margin值和body的padding值对应，把导航栏拉到页面边缘，底部margin可按需调整，避免和后续内容贴死 */
    margin: -10px -10px 20px -10px;
}

方案2：结构优化（推荐，无hack写法） #

不要给body加全局内边距，把导航栏和内容区分开，导航栏天然贴边，内容区单独加内边距，从根源避免子元素突破父级内边距的问题：

1. 调整HTML结构，把非导航栏的内容统一放到内容容器中：

<body>
    <!-- 导航栏直接作为body的第一个子元素 -->
    <nav class="navbar navbar-custom">
        <a class="navbar-brand" href="#">Jump to...</a>
        <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <i class="fa-solid fa-list-ul"></i>
            <i class="fa-solid fa-x"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav">
                <a class="nav-link" href="#smartphone">Item 1</a>
                <a class="nav-link" href="#data">Item 2</a>
                <a class="nav-link" href="#bam">Item 3</a>
                <a class="nav-link" href="#sim">Item 4</a>
            </div>
        </div>
    </nav>
    <!-- 其余所有页面内容放到内容容器里 -->
    <main class="content-wrap">
        <!-- 你原有的其他页面内容 -->
    </main>
</body>

2. 调整对应CSS：

body {
    height: 100%;
    margin: 0px;
    /* 删掉body上原有的padding:10px */
    max-width: 100%;
    font-family: 'Quicksand', sans-serif;
    background-color: #f5f5f5;
    justify-content: center;
    align-content: center;
}
/* 单独给内容区加内边距 */
.content-wrap {
    padding: 10px;
}
.navbar-custom {
    background-color: #0e47b0;
    width: 100% !important;
    white-space: nowrap;
    padding: 0 !important; /* 修正原来的无效none值即可，不需要负margin */
}

内容的提问来源于stack exchange，提问作者Alex