wake-up-neo.net

Bootstrap-sichtbare und ausgeblendete Klassen funktionieren nicht ordnungsgemäß

Ich habe versucht, die Bootstrap-Klassen visible und hidden zu verwenden, um Inhalte zu erstellen, die nur auf Mobilgeräten/Desktop sichtbar sind. Ich habe bemerkt, dass die Klassen nicht richtig funktionierten (und ich habe festgestellt, dass viele Leute dieses Problem hatten und es auf diese Weise gelöst haben). Deshalb habe ich ein mobiles Stylesheet erstellt, um festzulegen, welche der Divs auf dem Handy angezeigt werden sollen.

Dies ist mein aktueller Code:

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

Der .mobile sollte jetzt auf mobilen Bildschirmen mit einer Breite von 900px und kleiner sichtbar sein. Ich habe die Bootstrap-Klassen für das andere div, .containerdiv verwendet, und das funktioniert soweit, aber nur, wenn ich in meiner eigenen mobilen CSS-Tabelle einen Wert für hidden-xs hinzugefügt habe.

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

Das .mobile div sollte jetzt auf Bildschirmen mit einer Auflösung von 900px oder kleiner angezeigt werden. Ich bin nicht sicher, warum es nicht so ist, display:block ist das Richtige, um es richtig anzuwenden? Das Hinzufügen von visible-xs und visible-sm bewirkt nichts.

Was ist der richtige Weg, und warum funktioniert meine Version nicht?

htmlcsstwitter-bootstrapresponsive-design
28
Jane

Ihr .mobile div enthält folgende Stile:

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

Daher müssen Sie die visibility-Eigenschaft mit visible außer Kraft setzen, um die display-Eigenschaft mit block zu überschreiben. So wie:

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

Kein CSS erforderlich, sichtbare Klasse sollte folgendermaßen aussehen: visible-md-block nicht nur visible-md und der Code sollte folgendermaßen aussehen:

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

Zusätzliche CSS ist überhaupt nicht erforderlich.

7
Adarsh Gowda K R

Wenn Sie in css die Eigenschaft "display table" angeben, wirkt sich eine ausgeblendete div-Bootstrap-Klasse nicht auf dieses div aus

1
simranjit

Ihre mobile Klasse ist nicht korrekt:

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

Stand heute November 2017
Bootstrap v4 - Beta 

Responsive Dienstprogramme

Alle @ screen-Variablen wurden in v4.0.0 entfernt. Verwenden Sie stattdessen die Sass-Mixes media-breakpoint-up (), media-breakpoint-down () oder media-breakpoint-only () oder die $ grid-breakpoints-Sass-Map.

Aus v3 entfernt: .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 -inline-block

Aus v4 alphas entfernt: .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