it-swarm.dev

Widoczne i ukryte klasy Bootstrap nie działają poprawnie

Próbowałem użyć klas Bootstrap visible i hidden do tworzenia treści widocznych tylko na urządzeniach mobilnych/komputerowych. Zauważyłem, że klasy nie działały poprawnie (i zauważyłem, że wiele osób miało ten problem i rozwiązało go w ten sposób), więc stworzyłem mobilny arkusz stylów, aby ustawić, które z div mają być wyświetlane na telefonie komórkowym.

To jest mój obecny kod:

<div class="containerdiv hidden-sm hidden-xs visible-md visible-lg">
  <div class="row">
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 logo">
    </div>
  </div>
</div>

<div class="mobile">
  test
</div>

Teraz .mobile powinien być widoczny na ekranach mobilnych, o szerokości 900 pikseli i mniejszych. Użyłem klas Bootstrap dla innego div, .containerdiv, i działa to do tej pory, ale tylko wtedy, gdy dodałem wartość hidden-xs do mojego własnego arkusza CSS mobilnego, tak;

.hidden-xs {
  display:none !important;
}
.mobile {
  display:block !important;
}

Div .mobile powinien teraz pojawić się na ekranach 900px lub mniejszych, ale nadal nie. Nie jestem pewien, dlaczego tak się nie dzieje. display:block to właściwa rzecz, której należy użyć poprawnie? Dodanie visible-xs i visible-sm nic nie robi.

Jaki jest właściwy sposób na to i dlaczego moja wersja nie działa?

28
Jane

Twój div .mobile ma następujące style:

.mobile {
    display: none !important;
    visibility: hidden !important;
}

Dlatego musisz nadpisać właściwość visibility za pomocą visible oprócz nadpisywania właściwości display za pomocą zmiennej block. Tak jak:

.visible-sm {
    display: block !important;
    visibility: visible !important;
}
17
Graham Langdon

Brak wymaganego CSS, widoczna klasa powinna wyglądać tak: visible-md-block nie tylko visible-md, a kod powinien wyglądać następująco:

<div class="containerdiv hidden-sm hidden-xs visible-md-block visible-lg-block">
    <div class="row">
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 logo">

        </div>
    </div>
</div>

<div class="mobile hidden-md hidden-lg ">
    test
</div>

Dodatkowe css w ogóle nie jest wymagane.

7

Jeśli podasz właściwość display table w css, niektóre ukryte klasy div bootstrap nie będą miały wpływu na ten div

1
simranjit

Twoja klasa telefonu komórkowego jest nieprawidłowa:

.mobile {
  display: none !important;
  visibility: hidden !important; //This is what's keeping the div from showing, remove this.
}
1
Jop

Od dzisiaj listopad 2017
Bootstrap v4 - beta 

Responsive narzędzia

Wszystkie zmienne @ screen-zostały usunięte w wersji 4.0.0. Użyj zamiast tego miksów Sass media-breakpoint-up (), media-breakpoint-down () lub tylko breakpointów () () lub mapy Sass $ grid-breakpoints.

Usunięto z v3: .hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg -liniowy blok

Usunięto z alfa v4: .hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden- lg-down

https://getbootstrap.com/docs/4.0/migration/#responsive-utilities

0
jriver27