Отступ Navbar Bootrstap

[Скиф]

Доброго. Проблема с элементом Bootstrap, а именно navbar. При добавлении элемента появляется негативный отступ до дальнейшего контента страницы. Как его убрать? 

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-main" aria-expanded="false">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#"><img src="img/logo.jpg" height="50"></a>
      </div>
      <div class="collapse navbar-collapse" id="navbar-main">
        <ul class="nav navbar-nav">
          <li><a href="#href1">О системе<span class="sr-only">(current)</span></a></li>
          <li><a href="#href2">Отзывы</a></li>
          <li><a href="#href3">Фото</a></li>
          <li><a href="#href4">Карта</a></li>
          <li class="buy"><a href="#href5">Заказать</a></li>
          <li><p class="contact">&emsp;+38-063-000-00-00 / +38-067-000-00-00</p></li>
          </ul>
      </div>
    </div>
  </nav>

Далее сразу код 

<div class="col-xs-12 intro">
        <div class="intro-info">
         <p class="intro-content">Ravelco - ни единого угона за 41 год. Американское качество.</p>
            <p class="intro-content">Закажите сегодня и получите скидку <em>1000 грн.</em></p>
         <button type="button" class="btn btn-default btn-transition">Заказать</button>
         </div>
        </div>

 

[AlexZaw]

по html коду как-бы трудно что-то сказать в данном случае  приложите css, а еще лучше ссылку на страницу ибо всякие бутстрапы и иже с ними  есть зло

[swandev]

11 час назад, Скиф сказал:

Доброго. Проблема с элементом Bootstrap, а именно navbar. При добавлении элемента появляется негативный отступ до дальнейшего контента страницы. Как его убрать? 

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-main" aria-expanded="false">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#"><img src="img/logo.jpg" height="50"></a>
      </div>
      <div class="collapse navbar-collapse" id="navbar-main">
        <ul class="nav navbar-nav">
          <li><a href="#href1">О системе<span class="sr-only">(current)</span></a></li>
          <li><a href="#href2">Отзывы</a></li>
          <li><a href="#href3">Фото</a></li>
          <li><a href="#href4">Карта</a></li>
          <li class="buy"><a href="#href5">Заказать</a></li>
          <li><p class="contact">&emsp;+38-063-000-00-00 / +38-067-000-00-00</p></li>
          </ul>
      </div>
    </div>
  </nav>

Далее сразу код 

<div class="col-xs-12 intro">
        <div class="intro-info">
         <p class="intro-content">Ravelco - ни единого угона за 41 год. Американское качество.</p>
            <p class="intro-content">Закажите сегодня и получите скидку <em>1000 грн.</em></p>
         <button type="button" class="btn btn-default btn-transition">Заказать</button>
         </div>
        </div>

 

Navbar же фиксированный. Может его высота меньше, чем отступ сверху? Поэтому и негативный отступ

[Скиф]

16 часов назад, swandev сказал:

Может его высота меньше, чем отступ сверху?

Извини, не понял. Какой отступ сверху? Дальше идет браузерная строка. То есть, никакого верхнего отступа нету.

Edited June 27, 2017 by Скиф

[swandev]

2 минуты назад, Скиф сказал:

Извини, не понял. Какой отступ сверху? Дальше идет браузерная строка.

У вас фиксированый navbar.  У этого navbar'a есть какая-то высота, пусть будет 50px для примера. Под этим navbar'ом есть контент, не фиксированный, соответственно navbar на него никак не влияет. Судя по скриншоту от браузерной строки до контента под navbar'ом есть какой-то отступ, пусть будет 70px, поэтому у вас лишние 20 px, которые вы выделили красными полосками.

Возможно я что-то не так понял, нужен живой пример.

[klierik]

У navbar по из-коробки есть отступ снизу:

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

Что бы от него избавится надо написать правило, которое его уберет.

[Скиф]

В 28.06.2017 в 09:36, klierik сказал:

Что бы от него избавится надо написать правило, которое его уберет.

Спасибо. Не подскажете, а что за правило такое? Ни удаления отступа из bootstrap.css, ни попытка перекрыть его в своем файле стилей способом margin-bottom: 0px; не помогло.

[klierik]

10 minutes ago, Скиф said:

Не подскажете, а что за правило такое?

уже подсказал выше в приведённом примере:

margin-bottom: 20px;

 

[Скиф]

Из вышеуказанного работает разве что только 

В 28.06.2017 в 09:36, klierik сказал:

border: 1px solid transparent;

Очень хитрым способом. Отсутствие белой рамки делает негативный отступ смазанным для глаза. Но тогда расположение контента выглядит нелепо. Его нужно опускать ниже. А это уже костыли полнейшие, да и при скролле закрепленной панели контент navbar будет прижат вниз, а не равномерно в центре.

Edited July 1, 2017 by Скиф

[DivMan]

Изучайте чистую вёрстку.