2017-07-29 1 views
0

ブートストラップを使用してウェブサイトを作成していますが、視差効果付きのおすすめ画像を作成したときに問題が発生しました。ナビゲーションバー(ブートストラップ)とおすすめ画像との間にスペースができているようです。このナビバとおすすめ画像との間にこの不要なギャップをどのように取り除きますか?

.parallax { 
background-image: url("../images/aboutHeader.jpg"); 
height: 100%; 
background-attachment: fixed; 
background-position: center; 
background-repeat: no-repeat; 
background-size: cover; 
} 

.parallax h2 { 
color: white; 
font-size: 4em; 
text-align: center; 
padding-top: 100px; 
} 


<!-- NAVBAR 
    ================================================== --> 
    <nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#"> 
      <img src="images/headerWhite.png" alt="Bird's Aerial Imaging LC" style="height:100%"> 
     </a> 
     </div> 
     <div class="collapse navbar-collapse navbar-right" id="myNavbar"> 
     <ul class="nav navbar-nav"> 
      <li><a href="#">Home</a></li> 
      <li class="active"><a href="#">About</a></li> 
      <li><a href="#">Gallery</a></li> 
      <li><a href="#">Services</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
     </div> 
    </div> 
    </nav> 

    <!-- FEATURED IMAGE =============================================================== --> 
    <section style="height:250px;"> 
    <div class="parallax"> 
     <h2>About Us</h2> 
    </div> 
    </section> 

答えて

0

視差divとnavbarの間の白い垂直スペースを意味すると私の答えはそれに依存します、あなたの問題が異なる場合は教えてください。

あなたのソリューションは、削除がすべてです:

1) "H2" からマージンプロパティ:

.parallax h2 { 
    margin-top: 0; 
} 

2) "ナビゲーションバー" からパディングプロパティ:

.navbar { 
    padding-bottom: 0; 
} 

うまくいきたいと思います!

0

あなたのセクションのタグにposition:absolute; top:0;を追加することができます。それは間違いなくスペースを削除します...

セクションの周りのデフォルトのマージンまたはパディングのためかもしれません。 margin:0; padding:0;これに加えてください

関連する問題