navbarロゴとnavbarメニューとnavbarロゴの間のスペースを削除するには

Question

私はこれに固執しています。私は、navbarブランドとnavbarメニューの間のスペースを削除したいと思います。また、Navbarのロゴ画像を置くと、navbar-fixedが大きくなり、ページヘッダーをカバーします。

 <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
     <div class="container-fluid"> 
      <div class="navbar-header page-scroll"> 



       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <span class="logo"><img width="40%" src="images/windsor-logo_horizontal-colored.png" alt="WindSor"></span> 
      </div> 

      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse navbar-ex1-collapse"> 
       <ul class="nav navbar-nav navbar-right"> 
        <!-- Hidden li included to remove active class from about link when scrolled up past about section --> 
        <li> 
         <a class="page-scroll" href="#page-top"> <span class="glyphicon glyphicon-home"> Home</span></a> 
        </li> 
        <li> 
         <a class="page-scroll" href="#about">About</a> 
        </li> 
        <li> 
         <a class="page-scroll" href="#services">Services</a> 
        </li> 
        <li> 
         <a class="page-scroll" href="#contact">Contact</a> 
        </li> 
       </ul> 
      </div> 
      <!-- /.navbar-collapse --> 
     </div> 
     <!-- /.container --> 
    </nav> 

screenshot

サークルスペースは私が削除したいものです。私は、あなたのスタイルシートに問題に直面していると思います

body { 
    width: 100%; 
    height: 100%; 
} 

html { 
    width: 100%; 
    height: 100%; 
} 

@media(min-width:767px) { 
    .navbar { 
     padding: 20px 0; 
     -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out; 
     -moz-transition: background .5s ease-in-out,padding .5s ease-in-out; 
     transition: background .5s ease-in-out,padding .5s ease-in-out; 
     margin: 
    } 

    .top-nav-collapse { 
     padding: 0; 
    } 
} 



.intro-section { 
    height: 100%; 
    padding-top: 150px; 
    text-align: center; 
    background: #fff; 
} 

.about-section { 
    height: 100%; 
    padding-top: 150px; 
    text-align: center; 
    background: #eee; 
} 

.services-section { 
    height: 100%; 
    padding-top: 150px; 
    text-align: center; 
    background: #fff; 
} 

.contact-section { 
    height: 100%; 
    padding-top: 150px; 
    text-align: center; 
    background: #eee; 
} 

Answer 1

おそらくjsFiddle

<span class="logo"><img width="40%" src="images/windsor-logo_horizontal-colored.png" alt="WindSor"></span> 

チェックにクラス.navbar-brandを追加する必要があります：https://plnkr.co/edit/uquYGOtMFu2cNbbwQQFT?p=preview

Answer 2

：

は、ここに私のCSSです。ブートストラップのみを使用するとすべて正常に動作しています。フィドルをフルページで見る。あなたは正しい出力を見つけるでしょう。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
 
     <div class="container-fluid"> 
 
      <div class="navbar-header page-scroll"> 
 

 

 

 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
 
        <span class="sr-only">Toggle navigation</span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
       </button> 
 
       <span class="logo"><img width="40%" src="https://assets.servedby-buysellads.com/p/manage/asset/id/28536" alt="WindSor"></span> 
 
      </div> 
 

 
      <!-- Collect the nav links, forms, and other content for toggling --> 
 
      <div class="collapse navbar-collapse navbar-ex1-collapse"> 
 
       <ul class="nav navbar-nav navbar-right"> 
 
        <!-- Hidden li included to remove active class from about link when scrolled up past about section --> 
 
        <li> 
 
         <a class="page-scroll" href="#page-top"> <span class="glyphicon glyphicon-home"> Home</span></a> 
 
        </li> 
 
        <li> 
 
         <a class="page-scroll" href="#about">About</a> 
 
        </li> 
 
        <li> 
 
         <a class="page-scroll" href="#services">Services</a> 
 
        </li> 
 
        <li> 
 
         <a class="page-scroll" href="#contact">Contact</a> 
 
        </li> 
 
       </ul> 
 
      </div> 
 
      <!-- /.navbar-collapse --> 
 
     </div> 
 
     <!-- /.container --> 
 
    </nav>