Elemente im reaktionsschnellen Layout ausblenden?

298

Wenn Sie durch den Bootstrap schauen, sieht es so aus, als würden sie das Reduzieren der Menüleistenelemente für kleinere Bildschirme unterstützen. Gibt es etwas Ähnliches für andere Elemente auf der Seite?

Zum Beispiel habe ich eine zusammen mit Navi-Pillen nach rechts geschwommen. Auf einem kleinen Bildschirm verursacht dies Probleme. Ich würde es gerne zumindest in ein ähnliches Dropdown-Menü für mehr Klicks einfügen.

Ist dies innerhalb des vorhandenen Bootstrap-Frameworks möglich?

Kaitlyn2004
quelle

Antworten:

648

Neue sichtbare Klassen zu Bootstrap hinzugefügt

Extra kleine Geräte Telefone (<768px)(Class names : .visible-xs-block, hidden-xs)

Tablets für kleine Geräte (≥768px)(Class names : .visible-sm-block, hidden-sm)

Mittlere Geräte Desktops (≥992px)(Class names : .visible-md-block, hidden-md)

Desktops für große Geräte (≥1200px)(Class names : .visible-lg-block, hidden-lg)

Weitere Informationen: http://getbootstrap.com/css/#responsive-utilities


Unten ist ab Version 3.2.0 veraltet


Extra kleine Geräte Telefone (<768px) (Class names : .visible-xs, hidden-xs)

Tablets für kleine Geräte (≥768px) (Class names : .visible-sm, hidden-sm)

Mittlere Geräte Desktops (≥992px) (Class names : .visible-md, hidden-md)

Desktops für große Geräte (≥1200px) (Class names : .visible-lg, hidden-lg)


Viel älterer Bootstrap


.hidden-phone, .hidden-tablet usw. werden nicht unterstützt / sind veraltet.

AKTUALISIEREN:

In Bootstrap 4 gibt es zwei Arten von Klassen:

  • Die, hidden-*-updie das Element ausblenden, wenn sich das Ansichtsfenster am angegebenen Haltepunkt oder weiter befindet.
  • hidden-*-down die das Element ausblenden, wenn sich das Ansichtsfenster am angegebenen Haltepunkt oder kleiner befindet.

Das neue xlAnsichtsfenster wurde auch für Geräte mit einer Breite von mehr als 1200 Pixel hinzugefügt. Für weitere Informationen klicken Sie hier .

Marc Uberstein
quelle
2
Ich glaube nicht , .hidden-phoneund .hidden-tabletsind veraltet ** - sie sind ** nicht unterstützt . Veraltet bedeutet in der Regel , dass "andere Ansätze abgelöst wurden, obwohl sie weiterhin unterstützt werden und bald auslaufen sollen" . Dies scheint bei Bootstrap 3.2.0 der Fall zu sein - .visible-xsund dergleichen funktioniert derzeit noch, während .hidden-phoneFreunde in der Bootstrap-Funktionalität völlig fehlen.
Slipp D. Thompson
2
Vielen Dank - ich habe die Antwort auf den richtigen Wortlaut aktualisiert. Sollte jetzt für andere Benutzer etwas klarer sein.
Marc Uberstein
2
Zu Ihrer Information: Haben Sie etwas mehr Nachforschungen angestellt - es scheint, dass „veraltet“ häufig in formalen Kontexten verwendet wird, da der Zustand der Nichtunterstützung auf die Ablehnung folgt. Ich denke, "nicht unterstützt" funktioniert genauso gut, aber was auch immer. Vielen Dank, dass Sie meinen früheren Vorschlag berücksichtigt haben.
Slipp D. Thompson
1
:) Ich habe beide hinzugefügt ... um Laien willen. Vielen Dank, dass Sie ein bisschen mehr über die korrekte Formulierung recherchiert haben. Wir werden dies auf jeden Fall für zukünftige Beiträge berücksichtigen. prost
Marc Uberstein
2
Beachten Sie, dass das Bootstrap 4-Update für Bootstrap 4 Alpha ist. In der Release-Version sollten Sie die Klassen .d- -none und d- block verwenden. getbootstrap.com/docs/4.0/migration/#responsive-utilities
Pieter De Bie
137

Bootstrap 4 Beta Antwort:

d-block d-md-noneum sich auf mittleren, großen und extragroßen Geräten zu verstecken .

d-none d-md-blockauf kleinen und extra kleinen Geräten zu verstecken .

Geben Sie hier die Bildbeschreibung ein

Beachten Sie, dass Sie auch inline durch Ersetzen d-*-blockdurchd-*-inline-block


Alte Antwort: Bootstrap 4 Alpha

  • Sie können die Klassen verwenden .hidden-*-up, um sich auf einer bestimmten Größe und größeren Geräten auszublenden

    .hidden-md-upum sich auf mittleren, großen und extragroßen Geräten zu verstecken .

  • Das gleiche gilt .hidden-*-downfür das Verstecken auf einer bestimmten Größe und kleineren Geräten

    .hidden-md-downauf mittleren, kleinen und extra kleinen Geräten zu verstecken

  • sichtbar- * ist mit Bootstrap 4 keine Option mehr

  • Um nur auf mittleren Geräten anzuzeigen , können Sie beide kombinieren:

    hidden-sm-down und hidden-xl-up

Die gültigen Größen sind:

  • xs für Telefone im Hochformat (<34em)
  • sm für Telefone im Querformat (≥34em)
  • md für Tabletten (≥48em)
  • lg für Desktops (≥62em)
  • xl für Desktops (≥75em)

Dies war ab Bootstrap 4, Alpha 5 (Januar 2017). Weitere Details hier: http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

Auf Bootstrap 4.3.x: https://getbootstrap.com/docs/4.3/utilities/display/

Julien
quelle
8
Diese wurden aus v4 beta entfernt. Sie verwenden die .d-Klassen jetzt , um sie in verschiedenen Größen auszublenden oder anzuzeigen. getbootstrap.com/docs/4.0/utilities/display
DriverDan
1
Ich habe es gesehen, aber ich versuche immer noch, das herauszufinden ... Wie verstecke ich erst jetzt etwas auf einem kleinen Bildschirm? Ich brauche das Gegenteil von d-md-none, da ich je nach großem und kleinem Bildschirm auf div umschalte.
Leo Müller
@LeoMuller Wenn Sie möchten, dass sich ein Element in der Größe sm und darunter versteckt, aber in md, lg und xl sichtbar ist, verwenden Sie d-none d-md-block. code.luasoftware.com/tutorials/bootstrap/…
Desmond Lua
@DesmondLua Ich denke das gleiche wie LeoMuller ... in BS4 verhalten sich einige Elemente als Blöcke und andere als Flex ... ¿Warum muss ich vorher nur über die BS4-Natur eines Elements Bescheid wissen, wenn ich es in Telefonen verstecken möchte, aber ich Möchten Sie es als BS4-Standard in Tablets und Laptops anzeigen? Es widerspricht Ihrer normalen Meinung ... Ich hoffe, das BS4-Team behebt dies vor der endgültigen Veröffentlichung
JavierFuentes,
Ich kann die Dokumentation zu d-block in der aktuellen Bootstrap 4-Dokumentation nicht finden. Haben sie diese entfernt?
Mojimi
32

Bootstrap 4.x Antwort

hidden-* Klassen werden ab Bootstrap 4 Beta entfernt.

Wenn Sie auf Medium und höher zeigen möchten, verwenden Sie die d-*Klassen, z.

<div class="d-none d-md-block">This will show in medium and up</div>

Wenn Sie nur in kleinen und unten zeigen möchten, verwenden Sie dies:

<div class="d-block d-md-none"> This will show only in below medium form factors</div>

Bildschirmgröße und Klassendiagramm

| Screen Size        | Class                          |
|--------------------|--------------------------------|
| Hidden on all      | .d-none                        |
| Hidden only on xs  | .d-none .d-sm-block            |
| Hidden only on sm  | .d-sm-none .d-md-block         |
| Hidden only on md  | .d-md-none .d-lg-block         |
| Hidden only on lg  | .d-lg-none .d-xl-block         |
| Hidden only on xl  | .d-xl-none                     |
| Visible on all     | .d-block                       |
| Visible only on xs | .d-block .d-sm-none            |
| Visible only on sm | .d-none .d-sm-block .d-md-none |
| Visible only on md | .d-none .d-md-block .d-lg-none |
| Visible only on lg | .d-none .d-lg-block .d-xl-none |
| Visible only on xl | .d-none .d-xl-block            |

Anstatt explizite .visible-*Klassen zu verwenden, machen Sie ein Element sichtbar, indem Sie es bei dieser Bildschirmgröße einfach nicht ausblenden. Sie können eine .d-*-noneKlasse mit einer .d-*-blockKlasse kombinieren , um ein Element nur in einem bestimmten Intervall von Bildschirmgrößen anzuzeigen (z. B. .d-none.d-md-block.d-xl-none zeigt das Element nur auf mittleren und großen Geräten an).

Dokumentation

kiranvj
quelle
23

Sie können diese Modulklassensuffixe für jedes Modul eingeben, um besser steuern zu können, wo es angezeigt oder ausgeblendet wird.

.visible-phone  
.visible-tablet     
.visible-desktop    
.hidden-phone   
.hidden-tablet  
.hidden-desktop 

http://twitter.github.com/bootstrap/scaffolding.html Scrollen Sie nach unten

John Taylor
quelle
Danke - ich möchte eigentlich, dass sie sichtbar sind ... nur in einer komprimierten / kollabierten Form wie dem Navbar-Collapse, der ausschließlich für die Navbar ist, und ich sehe keine andere Unterstützung für andere Elemente ...
Kaitlyn2004
Sie können basierend auf ihren Klassennamen und / oder ihrer ID reduziert werden. Wenn Sie das CSS / JS finden, können Sie zusätzliche Klassen / IDs hinzufügen, die dasselbe tun.
Justinavery
Gibt es eine Chance, ein Beispiel zu nennen? Ich sehe das Collapse-Plugin, bin mir aber nicht sicher, ob es implementiert werden soll. Zumindest innerhalb der Navigationsleiste scheint es sehr automatisch gehandhabt zu werden - oder zumindest in den Kern des Bootstraps
eingebaut
7
Veraltet seit Bootstrap 3.
Gereltod
1
Bitte informieren Sie, dass es nur für #Bootstrap 2
Lucas Bustamante
19

Ich muss hier einige Klarstellungen hinzufügen:

1) Die angezeigte Liste (sichtbares Telefon, sichtbares Tablet usw.) ist in Bootstrap 3 veraltet. Die neuen Werte sind:

  • sichtbare-xs- *
  • sichtbar-sm- *
  • sichtbar-md- *
  • sichtbar-lg- *
  • hidden-xs- *
  • hidden-sm- *
  • hidden-md- *
  • hidden-lg- *

Das Sternchen bedeutet für jedes Folgendes (ich zeige unten nur sichtbare xs- *):

  • sichtbarer-xs-Block
  • sichtbare-xs-inline
  • sichtbarer-xs-inline-block

2) Wenn Sie diese Klassen verwenden, fügen Sie keinen Punkt vor (wie in einem Teil der obigen Antwort verwirrend gezeigt).

Zum Beispiel:

<div class="visible-md-block col-md-6 text-right text-muted">
   <h5>Copyright &copy; 2014 Jazimov</h5>
</div>

3) Sie können sichtbare * und versteckte * verwenden (z. B. sichtbare xs und versteckte xs), diese sind jedoch in Bootstrap 3.2.0 veraltet.

Weitere Details und die neuesten technischen Daten finden Sie hier und suchen Sie nach "sichtbar": http://getbootstrap.com/css/

Jazimov
quelle
Falsch hidden-xs-blockist nicht gültig, aber visible-xs-blockist
Hammad Khan
@hmd: Kannst du eine Quelle / ein Zitat für deinen Kommentar angeben, die ich nicht einmal vollständig verstehe, weil es nicht einmal ein vollständiger Satz ist? Was genau versuchst du zu teilen? Wollen Sie damit sagen, dass nur der Hidden-XS-Block nicht gültig ist, oder sagen Sie, dass Hidden-Xs- * nicht gültig ist? Wollen Sie damit sagen, dass der Hidden-MD-Block gültig ist, während der Hidden-XS-Block nicht gültig ist? Bitte erläutern Sie dies besonders, da Sie meinen Kommentar anscheinend abgelehnt haben, als ich die Sprache direkt aus der Bootstrap-Online-Dokumentation kopiert hatte. Auf welche Version von Bootstrap beziehen Sie sich in Ihrem Kommentar?
Jazimov
2
ok, möglicherweise gibt es einige Änderungen im Bootstrap. Schauen Sie sich einfach die am besten gewählte Antwort an, die die richtige Lösung bietet. Mit verstecktem Element können Sie NICHT Block, Inline und Inline-Block verwenden. Mit sichtbar müssen Sie es verwenden. Ich glaube, ich verwende Bootstrap 3.x.Versuchen Sie einfach Ihre Lösung für ein Element, das sich am Telefon versteckt :)
Hammad Khan
2

Alles hidden-*-up, hidden-*Klassen funktionieren bei mir nicht, also füge ich hiddenvorher selbst erstellte Klassen hinzuvisible-* (die für die aktuelle Bootstrap - Version funktioniert). Es ist sehr nützlich, wenn Sie div nur für einen Bildschirm anzeigen und für alle anderen ausblenden müssen.

CSS:

.hidden {display:none;}

HTML:

<div class="col-xs-12 hidden visible-xs visible-sm">
   <img src="photo.png" style="width:100%">
</div>
Gediminas
quelle
1
versteckte * Klassen wurden in Bootstrap 4 Beta gelöscht, Sie verwenden jetzt d- {sm, md, lg, xl} -none
Chris M
Vielen Dank! Nur für den Fall, meine Antwort ist immer noch gültig für Nicht-Betas
Gediminas
2

Für die Beta-Version von Bootstrap 4.0 (und ich gehe davon aus, dass dies endgültig bleibt) gibt es eine Änderung. Beachten Sie, dass die versteckten Klassen entfernt wurden.

Siehe die Dokumente: https://getbootstrap.com/docs/4.0/utilities/display/

Um den Inhalt auf Mobilgeräten auszublenden und auf größeren Geräten anzuzeigen, müssen Sie die folgenden Klassen verwenden:

d-none d-sm-block

Das Set der ersten Klasse zeigt keine Geräte an und das zweite zeigt es für Geräte "sm" an (Sie können md, lg usw. anstelle von sm verwenden, wenn Sie auf verschiedenen Geräten anzeigen möchten.

Ich schlage vor, vor der Migration darüber zu lesen:

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

Przemek Nowak
quelle
Es ist traurig, obwohl es nicht normal funktioniert mit Collapse Togler
David Constantine
0

In Boostrap 4.1 (Snippet ausführen, da ich den gesamten Tabellencode aus der Bootstrap-Dokumentation kopiert habe):

.fixed_headers {
  width: 750px;
  table-layout: fixed;
  border-collapse: collapse;
}
.fixed_headers th {
  text-decoration: underline;
}
.fixed_headers th,
.fixed_headers td {
  padding: 5px;
  text-align: left;
}
.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {
  min-width: 200px;
}
.fixed_headers td:nth-child(2),
.fixed_headers th:nth-child(2) {
  min-width: 200px;
}
.fixed_headers td:nth-child(3),
.fixed_headers th:nth-child(3) {
  width: 350px;
}
.fixed_headers thead {
  background-color: #333;
  color: #FDFDFD;
}
.fixed_headers thead tr {
  display: block;
  position: relative;
}
.fixed_headers tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 300px;
}
.fixed_headers tbody tr:nth-child(even) {
  background-color: #DDD;
}
.old_ie_wrapper {
  height: 300px;
  width: 750px;
  overflow-x: hidden;
  overflow-y: auto;
}
.old_ie_wrapper tbody {
  height: auto;
}
<table class="fixed_headers">
  <thead>
    <tr>
      <th>Screen Size</th>
      <th>Class</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Hidden on all</td>
      <td><code class="highlighter-rouge">.d-none</code></td>
    </tr>
    <tr>
      <td>Hidden only on xs</td>
      <td><code class="highlighter-rouge">.d-none .d-sm-block</code></td>
    </tr>
    <tr>
      <td>Hidden only on sm</td>
      <td><code class="highlighter-rouge">.d-sm-none .d-md-block</code></td>
    </tr>
    <tr>
      <td>Hidden only on md</td>
      <td><code class="highlighter-rouge">.d-md-none .d-lg-block</code></td>
    </tr>
    <tr>
      <td>Hidden only on lg</td>
      <td><code class="highlighter-rouge">.d-lg-none .d-xl-block</code></td>
    </tr>
    <tr>
      <td>Hidden only on xl</td>
      <td><code class="highlighter-rouge">.d-xl-none</code></td>
    </tr>
    <tr>
      <td>Visible on all</td>
      <td><code class="highlighter-rouge">.d-block</code></td>
    </tr>
    <tr>
      <td>Visible only on xs</td>
      <td><code class="highlighter-rouge">.d-block .d-sm-none</code></td>
    </tr>
    <tr>
      <td>Visible only on sm</td>
      <td><code class="highlighter-rouge">.d-none .d-sm-block .d-md-none</code></td>
    </tr>
    <tr>
      <td>Visible only on md</td>
      <td><code class="highlighter-rouge">.d-none .d-md-block .d-lg-none</code></td>
    </tr>
    <tr>
      <td>Visible only on lg</td>
      <td><code class="highlighter-rouge">.d-none .d-lg-block .d-xl-none</code></td>
    </tr>
    <tr>
      <td>Visible only on xl</td>
      <td><code class="highlighter-rouge">.d-none .d-xl-block</code></td>
    </tr>
  </tbody>
</table>

https://getbootstrap.com/docs/4.1/utilities/display/#hiding-elements

Tai Ly
quelle