Question

我最近在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>

Answer 1

我认为默认的margin-bottom是导航栏类的20px。像这样为导航栏添加新的css代码。

.navbar{
  margin-bottom:0px;
}

我认为这会对你有所帮助:)。

在Bootstrap中设置轮播位置

1 个答案: