Pytanie Bootstrap css, jak sprawić, by zawsze było widoczne przejście na navbar?


Chciałbym dodać jeden z tych przycisków, które są wyświetlane na urządzeniu mobilnym, aby otworzyć zwinięte menu na pasku nawigacyjnym, ale do tej pory nie udało się, oto mniej kodu i 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>

po dalszej inspekcji zauważyłem, że element nie jest ukryty, jest po prostu przezroczysty, z jakiegoś powodu, jeśli dodam

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

widzę to dobrze, ale bez ikon paska lub granic. Nadal będę nad tym pracował

i can see it!

i tak chciałbym to pokazać:

Correct


11
2018-03-05 14:15


pochodzenie


co nie działa? Czy widzisz przycisk na urządzeniu mobilnym? Jeśli tak, czy coś się stanie po kliknięciu? - Jacob Raccuia
Chcę, aby był zawsze widoczny nawet na pulpicie, ale tak nie jest - sathia
Jest kod, którego tu nie ma - takie jak normalne klasy CSS zastosowane navbar-toggle-always. W bootstrapie klasą przycisku jest navbar-toggle, a to nie jest pokazane. - Jacob Raccuia
no cóż, mniej napisany przeze mnie kod dziedziczy klasę .navbar-toggle i zastępuje nośnik, który ukrywa go, gdy ma ponad 768 pikseli - sathia
Widzę. Nie wiem zbyt wiele na temat mniej, co wyjaśnia, dlaczego powyższe nie, ale teraz ma, trochę więcej sensu. - Jacob Raccuia


Odpowiedzi:


Po kilku testach udało mi się uzyskać pożądane wyniki:

tutaj jest mniej kodu:

.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;
  }
}

upewnij się, że masz co najmniej 768px na dolnym prawym panelu, aby go zobaczyć:

http://jsfiddle.net/vyzwfovr/


5
2018-03-09 10:29





Nie jestem pewien, czy chcesz dodać kolejny, czy wystarczy zmienić istniejący. Przypadek, chcesz zmienić istniejący, na domyślnej / czystej instalacji bootstrap, ten program:

.navbar-toggle {
    display: block;
}

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

2
2018-06-04 10:37



Proszę wyjaśnij swoją odpowiedź. Dzięki. - Dropout
Dzięki, to rozwiązało ... - anunixercoder


W normalnej instalacji bootstrap znajduje się ta linia css znaleziona w ich ogólnym pliku css:

.navbar-toggle { display:none; }

Aby zawsze wyświetlać przycisk, w niestandardowym CSS wystarczy dodać ten wiersz kodu. Jeśli Twój styl zostanie zastosowany po ich arkuszu stylów, zostanie on nadpisany.

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

1
2018-03-05 14:50



Jak już odpowiedziałem powyżej, już to nadpisuję, i nadal potrzebuję przełącznika navbar, aby działał tak, jak jest teraz - sathia


Kolory przełączania i paska ikon są zdefiniowane wraz z domyślnymi ustawieniami navbara i odwrotnie. Więc jeśli próbujesz wyświetlić je na niestandardowym elemencie div, kolory są również usuwane wraz z domyślnym / odwrotnym schematem kolorów.

Dodaj to do swojego css:

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

1
2018-03-07 17:14



Wraz z resztą twoich stylów css oczywiście lol - AndrewL
Podaj jsfiddle tego, co masz do tej pory, więc mogę pomóc także w części rozwijanej - AndrewL
byłoby świetnie, gdybyś mógł wyjaśnić, dlaczego to działa - jeśli tak jest! - fotanus
Kolory przełączania i paska ikon są definiowane razem z domyślnym navbar, jak również z odwróceniem navbar :) Więc jeśli próbujesz wyświetlić je na niestandardowym div, kolory są również usuwane wraz z navbar-default / odwrotny schemat kolorów. - AndrewL
Edytowałem odpowiedź - AndrewL


Dodaj niestandardową klasę do paska nawigacyjnego - przełącz, np. Navbar-toggle-visible, a następnie dodaj tę regułę do swojego css

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

0
2017-12-19 10:20



Nie działa - próbuje wyświetlić menu w poziomie - HerGiz