it-swarm.com.de

Elemente im responsiven Layout ausblenden

Wenn Sie durch Bootstrap blicken, scheint es, als würden sie das Minimieren der Menüelemente für kleinere Bildschirme unterstützen. Gibt es etwas Ähnliches für andere Elemente auf der Seite?

Zum Beispiel habe ich mit nav-Pillen rechts geschwommen. Auf einem kleinen Bildschirm verursacht dies Probleme. Ich würde es lieben, es zumindest in ein ähnliches Drop-to-Show-more-Dropdown-Menü aufzunehmen.

Ist dies im vorhandenen Bootstrap-Framework möglich?

275
Kaitlyn2004

Neue sichtbare Klassen zu Bootstrap hinzugefügt

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

Kleine Geräte Tablets (≥768px) (Class names : .visible-sm-block, hidden-sm)

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

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

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


Below ist seit v3.2.0 veraltet.


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

Kleine Geräte Tablets (≥768px) (Class names : .visible-sm, hidden-sm)

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

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


Viel älterer Bootstrap 


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

UPDATE:

In Bootstrap 4 gibt es zwei Arten von Klassen:

  • Der hidden-*-up, mit dem das Element ausgeblendet wird, wenn sich das Ansichtsfenster am angegebenen Haltepunkt befindet oder breiter ist.
  • hidden-*-down, der das Element verdeckt, wenn sich der Darstellungsbereich am angegebenen Haltepunkt oder darunter befindet.

Das neue xl-Ansichtsfenster wird auch für Geräte mit einer Breite von mehr als 1200px hinzugefügt. Für weitere Informationen klicken Sie hier .

623
Marc Uberstein

Bootstrap 4 Beta Antwort:

d-block d-md-none bis hide auf mittelgroßen, großen und extra großen -Geräten.

d-none d-md-block bis hide auf kleinen und besonders kleinen Geräten.

 enter image description here

Beachten Sie, dass Sie auch Inline durch Ersetzen von d-*-block durch d-*-inline-block ersetzen können.


Alte Antwort: Bootstrap 4 Alpha

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

    .hidden-md-up bis hide auf mittelgroßen, großen und extra großen -Geräten.

  • Dasselbe gilt für .hidden-*-down, um sich bei einer bestimmten Größe und kleineren Geräten auszublenden

    .hidden-md-down bis hide auf mittelgroßen, kleinen und extra kleinen Geräten

  • visible- * ist bei bootstrap 4 nicht mehr möglich

  • Um nur auf mittleren Geräten anzuzeigen, können Sie die beiden 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 Informationen hier: http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

98
Julien

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

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

http://Twitter.github.com/bootstrap/scaffolding.html scrollen Sie nach unten 

21
john taylor

Ich muss hier ein paar Klarstellungen hinzufügen:

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

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

Das Sternchen wird für jeden in Folgendes übersetzt (ich zeige nur sichtbar-xs- * unten):

  • visible-xs-Block
  • visible-xs-inline
  • visible-xs-Inline-Block

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

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 visible- * und hidden-* verwenden (z. B. visible-xs und hidden-xs), diese wurden jedoch in Bootstrap 3.2.0 nicht mehr unterstützt.

Weitere Informationen und die neuesten Spezifikationen finden Sie hier und suchen Sie nach "sichtbar": http://getbootstrap.com/css/

18
Jazimov

hidden-*-Klassen werden ab Bootstrap 4 Beta entfernt.

Wenn Sie auf Medium oder höher anzeigen 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 Klein und Klein anzeigen möchten, verwenden Sie folgendes:

<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, erstellen Sie ein Element sichtbar, indem es bei dieser Bildschirmgröße einfach nicht ausgeblendet wird. Sie können .__ kombinieren. eine .d-*-none-Klasse mit einer .d-*-block-Klasse, um nur ein Element anzuzeigen in einem bestimmten Intervall von Bildschirmgrößen (z. B. zeigt .d-none.d-md-block.d-xl-none das Element nur bei mittleren und großen Geräten).

Dokumentation

14
kiranvj

Bei der Bootstrap 4.0-Beta (und ich gehe davon aus, dass dies endgültig bleiben wird) gibt es eine Änderung - beachten Sie, dass die ausgeblendeten 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

Die erste Klasse zeigt keine geräteübergreifenden Geräte an, und die zweite zeigt sie 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 empfehle vor der Migration darüber zu lesen:

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

2
Przemek Nowak

Alle hidden-*-up, hidden-*-Klassen funktionieren für mich nicht. Deshalb füge ich selbst erstellte hidden-Klassen vor visible-* (die für die aktuelle Bootstrap-Version funktionieren) hinzu. Dies ist sehr nützlich, wenn Sie div nur für einen Bildschirm anzeigen und für alle anderen ausblenden möchten.

CSS:

.hidden {display:none;}

HTML:

<div class="col-xs-12 hidden visible-xs visible-sm">
   <img src="photo.png" style="width:100%">
</div>
2
Gediminas

In boostrap 4.1 (Schnipsel ausführen, weil 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

0
Tai Ly