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

Question

Hey guys I have a problem with padding on navbar with Bootstrap because I am not able to add padding right and left to menu items like "Home" "Features" etc, but when I do padding-top and bottom it works?

anyone can check code and see why padding left and right to menu items doesn't have any effect, but if you add padding-top and bottom it works?

<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 Code is Below

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

UPDATE: FIXED IT: Changed class of "nav-item nav-link" to "nav-item"

Answer 1

Bootstrap's css has padding-right: 0; declared on nav-link in _navbar.scss .

You can either

1. include your css file after bootstrap's on the page, or
2. use !important to make your style declaration take precedence.

Also, I think you have your css padding declaration mixed up. It works for me with 1 small change:

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

Simply change padding: 22px 0 22px 0; to padding: 0 22px 0 22px;

The order is: top, right, bottom, left. See https://www.w3schools.com/css/css_padding.asp . (FYI - This can be shortened to padding: 0 22px; )

So finally you end up with padding: 0 22px !important; . However, I would recommend using option 1 above rather than using !important.

Answer 2

---

1. You need to rewrite it with !important tag.

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

The code above is just to show what values go where.

---

2. Another solution is to add new class

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

and add this class to elements that you want to override and don't affect other elements with bootstrap's class.

Answer 3

maybe this will work?

  .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

It is the specificity of your selector.

The default bootstrap styles for .nav-link are:

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

Your selector is just:

.nav-link { ...

As you can see, the bootstrap one is more specific. You need to be more specific (without using !important!)

Seeing as you have an id on your .navbar-collapse , you could do:

#navbarNavAltMarkup a.nav-link { ...

That is using an ID , ID's are more specific than classes.