Elemente im reaktionsschnellen Layout ausblenden?

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?

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 .

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 .

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/

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

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

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/

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>

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

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