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

Question

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

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

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

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

Answer 2

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

.navbar-toggle { display:none; } 

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

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

Answer 3

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

Добавьте это в CSS:

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

Answer 4

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

.navbar-toggle { 
    display: block; 
} 

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

Answer 5

Добавить пользовательский класс в NavBar-тумблер, как Navbar-тумблер видимой и затем добавить это правило для вашего css

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