ブートストラップNavbar予期しないボトム間隔

Question

これは何回か尋ねられました。私はいくつかの異なる答えをチェックし、それらのいずれにも解決策が見つからなかった。 navbarにmargin-bottom: 0を設定しました。固定トップナビゲーションバーを使用していません。私のHTMLタグはすべて閉じられています。私が見た質問の解決策はどれも役に立たなかった。

これは非常に簡単です。私も答えが必要であるように感じますが、これは初めてのブートストラップでの経験ですが、私はそれを見ません。ここにはbootplyがあります。完成のために、ここでその資料をコピーします。

HTML

<!-- Navigation Bar --> 
<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">Brand</a> 
    </div> 
    <ul class="nav navbar-nav"> 
     <li onclick="navigateToSettings()" id="settingsHeaderItem"><a href="#">Settings</a></li> 
     <li><a href="#">Page 1</a></li> 
     <li><a href="#">Page 2</a></li> 
     <li><a href="#">Page 3</a></li> 
    </ul> 
    </div> 
</nav> 

<!-- Content Pane --> 
<div id="contentPane" class="contentPane"> 
    <h1>TEST</h1> 
</div> 

CSS

.navbar { 
    margin-bottom: 0; 
} 

.contentPane { 
    background-color: black; 
} 

RESULT

Answer 1

あなたのh1とnavにはマージンがあります。また、クラスを使用するので、他のすべてのh1タグとnavタグには影響しません。

http://www.bootply.com/eVIT3PIaJb

Answer 2

h1.someclass { 
    margin-top: 0px; 
} 
nav.someclass { 
    margin-bottom:0px; 
} 

display: inline-blockとwidth: 100%から.contentPane CSSクラスを設定します。これにより、コンテナは子供の高さをとるようになります。

http://www.bootply.com/nsERfrADNA

Answer 3

あなたはそれを試すことができます。

<nav class="navbar navbar-default" style="margin-bottom:0px;">