2017-08-29 9 views
-1

メニューとナビゲーションバーのマージンの間にパディングを削除しようとしています。私は答えが見つからないようです。bootstrap 4 navbar、cant remove padding

header nav #logo { 
 
    padding: -10px; }
<header> 
 
    <nav class="navbar navbar-expand-lg navbar-light bg-light" style="background-color: red;"> 
 
     <a class="navbar-brand" href="#"> 
 
      <img id="logo" src="images/logo.png" width="60" height="60"> 
 
     </a> 
 
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" 
 
       aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
 
      <span class="navbar-toggler-icon"></span> 
 
     </button> 
 
     <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
 
      <ul class="navbar-nav mr-auto"> 
 
       <li class="nav-item active"> 
 
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
 
       </li> 
 
       <li class="nav-item"> 
 
        <a class="nav-link" href="#">Link</a> 
 
       </li> 
 
       <li class="nav-item"> 
 
        <a class="nav-link disabled" href="#">Disabled</a> 
 
       </li> 
 
      </ul> 
 
      <form class="form-inline my-2 my-lg-0"> 
 
       <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> 
 
       <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
 
      </form> 
 
     </div> 
 
    </nav> 
 
</header>

enter image description here

+0

'0にマージン:-10px'、https://stackoverflow.com/questions/4973988/why-does- css-not-support-negative-padding – Morpheus

+0

「メニューとナビゲーションバーのマージンの間」 - 質問を明確にしてください – ZimSystem

+0

画像の説明をクリックしてください –

答えて

2

ブートストラップ4 spacing utilites for paddingを使用してください。

Decrease Padding Navbar Example

py-0セット垂直(y軸)パディング

<nav class="navbar navbar-dark py-0 bg-primary navbar-expand-lg"> 
    <a class="navbar-brand" href="#">Logo</a> 
    <div class="navbar-collapse collapse" id="navbarNav"> 
     <ul class="navbar-nav"> 
      <li class="nav-item py-0"><a href="#" class="nav-link">Link</a></li> 
     </ul> 
    </div> 
</nav>