Bootstrap css, как сделать всегда видимым navbar-toggle?

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

  .navbar-toggle-always{

    .navbar-toggle;

    @media (min-width: 768px){
      display: block!important;
    }

    .zero-margins;

  }

HTML-код

      <div class="pull-left ">
        <button type="button" class="navbar-toggle-always collapsed" data-toggle="collapse" data-target="#left" aria-expanded="false" aria-controls="navbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>

при дальнейшем осмотре я заметил, что элемент не скрыт, он просто прозрачный, по какой-то причине, если я добавить 

    @media (min-width: 768px){
      display: block!important;
      background-color:pink;
    }

Я вижу это хорошо,но без значков - баров или границ. Я продолжу работать над этим.

i can see it!

и вот как я хотел бы это показать:

Correct

11
css html twitter-bootstrap

6 ответов

после некоторых тестов мне удалось получить желаемых результатов:

вот меньше кода: 

.navbar-inverse {

  .navbar-toggle-always {
    border-color: @navbar-inverse-toggle-border-color;
    &:hover,
    &:focus {
      background-color: @navbar-inverse-toggle-hover-bg;
    }
    .icon-bar-always {
      background-color: @navbar-inverse-toggle-icon-bar-bg;
    }
  }
}

.navbar-toggle-always{

  .navbar-toggle;

  @media (min-width: 768px){
    display: block!important;
    background-color: transparent;
    border:1px solid #333333;
  }

  .zero-margins;

  .icon-bar-always {
    .icon-bar;
    border:1px solid #fff;
    display: block;
    border-radius: 1px;
  }

  .icon-bar-always + .icon-bar-always {
    margin-top: 4px;
  }
}

убедитесь, что у вас есть по крайней мере 768px на нижней правой панели, чтобы увидеть его:

http://jsfiddle.net/vyzwfovr/

5

в обычной начальной установке есть эта строка css, найденная в их общем файле css:

.navbar-toggle { display:none; }

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

.navbar-toggle { display:block; } // the !important isn't necessary
2

Я не уверен, хотите ли вы добавить еще один или достаточно изменить существующий. Я случай, вы хотите изменить существующий, на установке по умолчанию/clean bootstrap, это шоу делает это:

.navbar-toggle {
    display: block;
}

.navbar-collapse.collapse {
    display: none !important;
}
2

цвета переключателя и панели значков определяются вместе с navbar-default, а также с navbar-inverse. Поэтому, если вы пытаетесь отобразить их на пользовательском div, цвета также удаляются вместе с цветовой схемой navbar-default/inverse.

добавьте это в свой css:

.navbar-toggle {
    background-color: transparent;
}
.icon-bar {
    background-color:#333;
}
1

добавьте пользовательский класс в navbar-toggle, например navbar-toggle-visible, а затем добавьте это правило в css

  @media (min-width: 768px) {
  .navbar-toggle-visible {
    display: inline;
  }
0

почему бы просто не добавить d-block класс для toggler?

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