在Bootstrap中设置旋转木马位置

我最近在bootstrap中工作，并且在旋转木马问题中受苦。我在我的导航栏下拍摄了轮播图像，hoewever在我的导航栏和转盘图像之间有一段距离。我希望图像正好在我的导航栏下方。我如何解决这个问题？在Bootstrap中设置旋转木马位置

请看到我的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>

来源

2015-05-14 user3664663

我认为默认margin-bottom是20px的navbar类。像这样为navbar添加新的CSS代码。

.navbar{ 
    margin-bottom:0px; 
}

我认为这将帮助你:)

来源

2015-05-14 11:29:11

哇它的工作。非常感谢你！ – user3664663

在Bootstrap中设置旋转木马位置

回答

相关问题