在Bootstrap中設置旋轉木馬位置

Question

我最近在bootstrap中工作，並且在旋轉木馬問題中受苦。 我在我的導航欄下拍攝了輪播圖像，hoewever在我的導航欄和轉盤圖像之間有一段距離。我希望圖像正好在我的導航欄下方。我如何解決這個問題？

請看到我的HTML代碼和CSS代碼。

/*CSS![enter image description here][2]*/ 

.navbar-nav { 
    width: 100%; 
    text-align: center; 
} 
.navbar-nav > li { 
    float: none; 
    display: inline-block; 
} 

header .navbar-default { 
    border: none; 
    background-image: linear-gradient(to bottom, #2b2b2b, #555555); 
    border-radius: 0 !important; 
    -webkit-border-radius: 0 !important; 
    -moz-border-radius: 0 !important; 
      border-radius: 0 !important; 
} 

header .navbar-default .navbar-nav a { 
    color: #ffffff; 
} 

header .navbar-default .navbar-nav a:hover { 
    color: #dfdfdf; 
} 

/* HTML */ 
<header> 
    <nav class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="page main-menu"> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav"> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Blog</a></li> 
       <li><a href="#">Gallery</a></li> 
       <li><a href="#">Contact</a></li> 
       </ul> 
      </div><!-- /.navbar-collapse --> 
     </div> 
    </div><!-- /.container-fluid --> 
    </nav> 


<!-- Section Slide --> 

<div class="carousel slide" data-ride="carousel"> 
    <div class="carousel-inner"> 
     <div class="item active"><img src="images/slide1.jpg" alt="Lifestyle Photo"></div> 
    </div><!-- carousel-inner --> 
</div><!-- featured carousel --> 
</header> 

Answer 1

我認爲默認margin-bottom是20px的navbar類。 像這樣爲navbar添加新的CSS代碼。

.navbar{ 
    margin-bottom:0px; 
} 

我認爲這將幫助你:)