Question

大家好，我在Bootstrap导航栏上填充时遇到问题，因为我无法向菜单项（例如“ Home”，“ Features”等）左右添加填充，但是当我进行顶部和底部填充时，它可以工作吗？

任何人都可以检查代码，看看为什么向左和向右填充菜单项没有任何效果，但是如果添加padding-top和bottom可以起作用？

@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
@Getter
@Setter
private Integer id;

CSS代码在下面

<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>

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

Answer 1

引导程序的css已在padding-right: 0;中的nav-link上声明了_navbar.scss。

您可以

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

此外，我认为您混淆了CSS填充声明。只需一点零钱就可以为我工作：

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。

Answer 2

所以您的问题的答案是因为它使用的是Bootstrap的填充：

1。您需要使用!important标签进行重写。

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

上面的代码仅用于显示值在哪里。

2。另一个解决方案是添加新的课程

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

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

Answer 3

也许这行得通吗？

    .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>

Answer 4

这是选择器的特异性。

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

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

您的选择器只是：

.nav-link { ...

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

看到id上有.navbar-collapse，您可以这样做：

#navbarNavAltMarkup a.nav-link { ...

使用ID，ID比类更具体。

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

4 个答案: