Как я могу удалить пробел выше моей карусели?

Question

Я использую Bootstrap 3.3.6, и я не могу удалить пробел выше карусели. Я пытался добавить margin-top: -20px; в карусельного базового класса и хорошо не повезло :(

Вот мой код

HTML:.

<!-- Carousel 
================================================== --> 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
    <li data-target="#myCarousel" data-slide-to="1"></li> 
    <li data-target="#myCarousel" data-slide-to="2"></li> 
    </ol> 
    <div class="carousel-inner" role="listbox"> 
    <div class="item active"> 
     <img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>Example headline.</h1> 
      <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p> 
      <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p> 
     </div> 
     </div> 
    </div> 
    <div class="item"> 
     <img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>Another example headline.</h1> 
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
      <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p> 
     </div> 
     </div> 
    </div> 
    <div class="item"> 
     <img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>One more for good measure.</h1> 
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
      <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p> 
     </div> 
     </div> 
    </div> 
    </div> 
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 



     <span class="sr-only">Next</span> 
     </a> 
    </div><!-- /.carousel --> 

CSS:

/* Carousel base class */ 
.carousel { 
    height: 50px; 
    top: -20px; 
    width:100%; 
    margin: 0px auto; 
} 
/* Since positioning the image, we need to help out the caption */ 
.carousel-caption { 
    z-index: 10; 
} 

/* Declare heights because of positioning of img element */ 
.carousel .item { 
    height: 500px; 
    background-color: #777; 
} 
.carousel-inner > .item > img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    min-width: 100%; 
    height: 500px; 
} 

/* RESPONSIVE CSS 
-------------------------------------------------- */ 

@media (min-width: 768px) { 
    /* Navbar positioning foo */ 

    .navbar-wrapper .container { 
    padding-right: 15px; 
    padding-left: 15px; 
    } 
    .navbar-wrapper .navbar { 
    padding-right: 0; 
    padding-left: 0; 
    } 

    /* The navbar becomes detached from the top, so we round the corners */ 
    .navbar-wrapper .navbar { 
    border-radius: 4px; 
    } 

    /* Bump up size of carousel content */ 
    .carousel-caption p { 
    margin-bottom: 20px; 
    font-size: 21px; 
    line-height: 1.4; 
    } 

    .featurette-heading { 
    font-size: 50px; 
    } 
} 

Я попытался добавить margin-top: -20px; в таких классах, как .carousel, но не повезло :(

Answer 1

попытка добавить:

body { 
    padding-top: 70px; 
} 

Answer 2

По вашему вопросу, вы сказали, что вы добавили margin-top:-20px, но ваш пример кода говорит, что вы добавили top:-20px; Когда я запустил код в этом jsfiddle, в верхней части не было места.

Однако, я хотел бы, чтобы попытаться помочь, так что я бы сказал, что не изменяю .carousel класса непосредственно, но вместо целевой #myCarousel и сделать свой top: -20px там. Я делаю эту рекомендацию в случае, если ремень для обуви использует .carousel в других местах, кроме контейнера.

Однако это может изменить способ обработки остальной части страницы, поэтому я бы рекомендовал посмотреть на элемент, содержащий #myCarousel, так как скрипка не показывает никаких проблем. Надеюсь это поможет!

Answer 3

Я думаю, что пробел происходит из-за navbar, и для этого вы должны попробовать приведенный ниже код.

---

.navbar{ 
    margin-bottom: 0px!important; 
} 

Я надеюсь, что это работает ...!