Панель значков Bootstrap не отображается

панель значков в навигационном меню Bootstrap, не отображающаяся при изменении размера браузера:

   <section class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="/">
        brand
      </a>
    </div>
    </section>

вы можете увидеть пример JSBin live: http://jsbin.com/ixAqinA/1/

Ответ 1

Вы должны обернуть его внутри

<nav class="navbar navbar-default" role="navigation"></nav>

Ваш код исправлен: http://jsbin.com/ixAqinA/5/
Пример из документации Bootstrap

Ответ 2

У меня была аналогичная проблема, но это решение не сработало для меня из-за изменений в Bootstrap.

Для Bootstrap 3.1.1 мне понадобился следующий стиль, чтобы отображать строки значков на настраиваемой цветной навигационной панели, которая фиксирована в верхней части (так что .navbar-default не работает)

.navbar-toggle .icon-bar{ background-color: #fff;}

Просто измените #fff на цвет, который вы хотели бы показать.

Ответ 3

Bootstrap 4 больше не использует .icon-bar. Там это должно быть сделано как:

<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

Для получения дополнительной информации вы должны посмотреть здесь или в документация из Bootstrap 4