Bootstrap remove 1px padding/gap между Nav & Carousel/Div

Question

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

/* CSS используется здесь будет применяться после того, как bootstrap.css */

 .navbar { 
      margin: 0; /*add this*/ 
      padding: 0px; 
     } 

     .navbar-default { 
      background-color: #ffffff; 
     } 

     /* title */ 
     .navbar-default .navbar-brand { 
      color: #000000; 
     } 

     .navbar-default .navbar-brand:hover, 
     .navbar-default .navbar-brand:focus { 
      color: #808080; 
     } 

     /* link */ 
     .navbar-default .navbar-nav > li > a { 
      color: #000000; 
     } 
     .navbar-default .navbar-nav > li > a:hover, 
     .navbar-default .navbar-nav > li > a:focus { 
      color: #808080; 
     } 

     /* active link */ 

     .navbar-default .navbar-nav > .active > a, 
     .navbar-default .navbar-nav > .active > a:hover, 
     .navbar-default .navbar-nav > .active > a:focus { 
      color: #ffffff; 
      background-color: #000000; 
     } 

     .navbar-default .navbar-nav > .open > a, 
     .navbar-default .navbar-nav > .open > a:hover, 
     .navbar-default .navbar-nav > .open > a:focus { 
      color: #555; 
      background-color: #ff0000; 
     } 

     /* caret */ 
     .navbar-default .navbar-nav > .dropdown > a .caret { 
      border-top-color: #777; 
      border-bottom-color: #777; 
     } 
     .navbar-default .navbar-nav > .dropdown > a:hover .caret, 
     .navbar-default .navbar-nav > .dropdown > a:focus .caret { 
      border-top-color: #333; 
      border-bottom-color: #333; 
     } 
     .navbar-default .navbar-nav > .open > a .caret, 
     .navbar-default .navbar-nav > .open > a:hover .caret, 
     .navbar-default .navbar-nav > .open > a:focus .caret { 
      border-top-color: #555; 
      border-bottom-color: #555; 
     } 
     /* mobile version */ 
     .navbar-default .navbar-toggle { 
      border-color: #DDD; 
     } 
     .navbar-default .navbar-toggle:hover, 
     .navbar-default .navbar-toggle:focus { 
      background-color: #DDD; 
     } 
     .navbar-default .navbar-toggle .icon-bar { 
      background-color: #CCC; 
     } 
     @media (max-width: 767px) { 
      .navbar-default .navbar-nav .open .dropdown-menu > li > a { 
       color: #777; 
      } 
      .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, 
      .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { 
       color: #333; 
      } 
     } 

     .container { 
     padding-top: 0px !important; 
     padding-bottom: 0px !important; 
     margin-top: 0px !important; 
     margin-bottom: 0px !important; 
     } 

 <div class="container"> 

      <div class="navbar-header"> 
       <a class="navbar-brand" href="#">Progression</a> 
       <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </a> 
      </div> 

      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#">Physio</a></li> 
       <li><a href="#">Massage</a></li> 
       <li><a href="#">Beauty</a></li> 
       <li><a href="#">First Aid</a></li> 
       </ul> 
      </div> 

     </div> 

    </nav> 

       <!-- Carousel --> 

    <div class="container"> 
     <div class="row"> 
      <div class="col-sm-12> 

       <div id=" my-slider"="" data-ride="carousel"> 

        <!-- indicators dot nav --> 


        <!-- wrapper for slides --> 
        <div class="carousel-inner" role="listbox"> 

         <div class="item active"> 
          <img src="https://lh5.googleusercontent.com/-WHXl1TAoHoQ/VsW7_mHWeQI/AAAAAAAAAEQ/nzQm8w62c3s/w1310-h524-no/Progression_Massage_Budha.png" alt="Physio Massage Val d'Isere"> 
          <div class="carousel-caption"> 
           <h2>Massage</h2> 
           <h4>Relaxation to Deep Tissue</h4> 
          </div><!-- end carousel caption --> 
         </div> 

         <div class="item"> 
          <img src="https://lh4.googleusercontent.com/-lj7DIStRI8M/VthrRPFcQFI/AAAAAAAAAFY/2ynRLjTZTnI/w1310-h524-no/Progression_Beauty_Therapies.png" alt="Beauty Treatments Nails Facials &amp; Waxing Val d'Isere"> 
          <div class="carousel-caption"> 
           <h2>Beauty</h2> 
           <h4>Nails - Facials - Waxing</h4> 
          </div> 
         </div> 

         <div class="item"> 
          <img src="https://lh4.googleusercontent.com/-aCIY16PFylg/VsW6L-YwpqI/AAAAAAAAADA/wSTG1QlJLqY/w1310-h524-no/Progression_Val_dIsere.png" alt="Physiotherapy Assesment Treatment Rehab Val d'Isere"> 
          <div class="carousel-caption"> 
           <h2>Physiotherapy</h2> 
           <h4>Assesment Treatment Rehab</h4> 
          </div> 
         </div> 

        </div>    

       </div> 

      </div> 
     </div> 

http://www.bootply.com/jbTugk4aPV

Answer 1

На самом деле это не разрыв 1 пиксель это граница в названиях CSS navbar.less Строка №. 15.

Вот ваш CSS

.navbar { 
    position: relative; 
    min-height: 50px; 
    margin-bottom: 20px; 
    border: 1px solid transparent; 
} 

Помните свой ваш файл CSS код не милей границу в этом создавая этот пробел вы можете переопределить это, набрав другой CSS в файле.

.navbar{ 
    border:none!important; 
} 

Или вы можете просто установить border-width к 0px в

.navbar-static-top { 
    z-index: 1000; 
    border-width: 0px; 
} 

удалить 1px белую NavBar границу.