使用 Bootstrap 在导航栏的左侧和右侧添加填充的问题答案

【问题标题】：Issue with an adding padding to the left and right of the navbar using Bootstrap使用 Bootstrap 在导航栏的左侧和右侧添加填充的问题
【发布时间】：2019-05-20 03:09:16
【问题描述】：

大家好，我在使用 Bootstrap 在导航栏上进行填充时遇到问题，因为我无法在“主页”“功能”等菜单项中添加左右填充，但是当我进行顶部和底部填充时，它可以工作吗？

任何人都可以检查代码，看看为什么菜单项的左右填充没有任何效果，但是如果添加填充顶部和底部，它会起作用吗？

<nav class="navbar navbar-expand-lg navbar-light bg-orange">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
            <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
            <a class="nav-item nav-link" href="#">Features</a>
            <a class="nav-item nav-link" href="#">Pricing</a>
            <a class="nav-item nav-link disabled" href="#">Disabled</a>
        </div>
    </div>
</nav>

CSS 代码低于

.navbar{
    text-align: center;
    padding: 0;
    border-bottom: 4px solid black;
}
.navbar-brand{
    margin-left: 34px;
    font-size: 25px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
    'Lucida Sans', Arial, sans-serif;
}
.bg-orange{
    background-color: yellow;
}
.navbar-nav{
    font-size: 25px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 
    'Lucida Sans', Arial, sans-serif;
}
.nav-item{
    transition: 0.3s;
    padding: 22px 0px 22px 0px;
}
.nav-item:hover{
    background: orange;
}

更新：已修复： 将“nav-item nav-link”的类更改为“nav-item”

【问题讨论】：

将您的完整代码添加到您的问题中，甚至使用codepen.io 与我们分享，以便我们为您提供帮助！ :)
你能把代码添加到这些元素中吗？刚刚尝试添加padding，它工作正常
完成了 :) .
它工作正常，这是一个live preview。如果您更改了填充，它会工作得很好！
@Elharony 是的，但是如果您尝试向菜单项添加 padding-left 和 right 则不起作用。

标签： html css twitter-bootstrap

【解决方案1】：

Bootstrap 的 css 在 _navbar.scss 的导航链接上声明了 padding-right: 0;。

你可以

在页面上引导后包含您的 css 文件，或者
使用!important 使您的样式声明优先。

另外，我认为您的 css 填充声明混淆了。它对我有用，只需 1 个小改动：

https://codepen.io/anon/pen/NebeMN

只需将padding: 22px 0 22px 0; 更改为padding: 0 22px 0 22px;

顺序是：上、右、下、左。见https://www.w3schools.com/css/css_padding.asp。（仅供参考 - 这可以缩短为 padding: 0 22px;）

所以最后你得到了padding: 0 22px !important;。但是，我建议使用上面的选项 1 而不是使用 !important。

【讨论】：

仍然对我不起作用。 .nav-item{ 过渡：0.3s;填充：0 82px 0 82px； } 将填充从 22 更改为 82，并且即使添加 182px 或 882px 甚至更多，项目中左右两侧的填充也不会改变？
是的，它起作用了，但是没有 !important 就没有办法解决这个问题吗？因为使用 !important 可以覆盖其他一些样式

【解决方案2】：

也许这会起作用？

    .navbar{
        text-align: center;
        padding: 0;
        border-bottom: 4px solid black;
        height: 60px;
    }

    .navbar a{
        padding: 10px;
        margin: 5px 0 0 0;
        float: left;
    }

    .navbar-toggler {
        margin: 20px 10px 0 10px;
        height: 25px;
        width: 25px;
        float: left;
    }

    .navbar-brand{
        margin-left: 34px;
        font-size: 25px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
        'Lucida Sans', Arial, sans-serif;
    }
    .bg-orange{
        background-color: yellow;
    }
    .navbar-nav{
        font-size: 25px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
        'Lucida Sans', Arial, sans-serif;
    }
    .nav-item{
        transition: 0.3s;
        padding: 32px 20px 22px 0;
        margin: 5px 0 0 40px;
    }
    .nav-item:hover{
        background: orange;
    }

<nav class="navbar navbar-expand-lg navbar-light bg-orange">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
            <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
            <a class="nav-item nav-link" href="#">Features</a>
            <a class="nav-item nav-link" href="#">Pricing</a>
            <a class="nav-item nav-link disabled" href="#">Disabled</a>
        </div>
    </div>
</nav>

【讨论】：

试过了，但仍然只显示顶部和底部，没有向左或向右填充有任何变化

【解决方案3】：

所以你的问题的答案，因为它使用引导程序的填充：

1.你需要用!important 标签重写它。

padding: top, right, bottom, left !important;

上面的代码只是为了显示什么值去哪里。

2。另一种解决方案是添加新类

.item{ padding-right:22px !imporant; }

并将此类添加到您要覆盖的元素中，并且不影响具有引导程序类的其他元素。

【讨论】：

没有 !important 就没有办法使用，因为我不想用 !important 覆盖其他样式？
@behar 您应该在引导程序的 css 之后链接到您页面上的 css 文件。
@Kev 是对的，你在引导之前加载你的 CSS
您在谈论 html 上的样式表链接还是如何？我没有正确理解对不起
@behar 更新了答案。他在谈论链接css文件的html。您在引导之前首先链接您的 CSS。

【解决方案4】：

这是您的选择器的特异性。

.nav-link 的默认引导样式为：

.navbar-expand-lg .navbar-nav .nav-link { ...

你的选择器只是：

.nav-link { ...

如您所见，引导程序更具体。您需要更具体（不使用！important！）

看到你的.navbar-collapse 上有一个id，你可以这样做：

#navbarNavAltMarkup a.nav-link { ...

即使用ID，ID 比类更具体。

【讨论】：