Bootstrap css, как сделать всегда видимым навигационный переключатель?

Я хочу добавить одну из тех кнопок, которые отображаются на мобильном устройстве, чтобы открыть свернутое меню на панели навигации, но пока не удалось, здесь меньше кода и 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;
    }

Я вижу это прекрасно, но с полосками иконок или границ. Я буду продолжать работать над ним

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

Ответы

Ответ 1

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

здесь меньше кода:

.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/

Ответ 2

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

.navbar-toggle {
    display: block;
}

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

Ответ 3

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

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

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

Ответ 4

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

.navbar-toggle { display:none; }

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

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

Ответ 5

Добавьте настраиваемый класс в ваш навигационный переключатель, например, навигационный переключатель, а затем добавьте это правило в свой CSS

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