Jump to content
  • 0

Отступ Navbar Bootrstap


Скиф
 Share

Question

Доброго. Проблема с элементом 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>

 

FireShot Capture 2 - Ravelco. Противоугонная система - http___localhost_Ravelco_.png

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0
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>

 

FireShot Capture 2 - Ravelco. Противоугонная система - http___localhost_Ravelco_.png

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

Link to comment
Share on other sites

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

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

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

Edited by Скиф
Link to comment
Share on other sites

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

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

  • 0

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

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

border: 1px solid transparent;

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

FireShot Capture 4 - Ravelco. Противоугонная система - http___localhost_Ravelco_.jpg

Edited by Скиф
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy