Elementen verbergen in responsieve lay-out?

Als je door bootstrap kijkt, lijkt het alsof ze het samenvouwen van de menubalkitems voor kleinere schermen ondersteunen. Is er iets soortgelijks voor andere items op de pagina?

Ik heb bijvoorbeeld een samen met nav-pillen naar rechts gestuurd. Op een klein scherm geeft dit problemen. Ik zou het op zijn minst in een vergelijkbare vervolgkeuzelijst click-to-show-more willen plaatsen.

Is dit mogelijk binnen het bestaande Bootstrap-framework?

Antwoord 1, autoriteit 100%

Nieuwe zichtbare klassen toegevoegd aan Bootstrap

Extra kleine apparaten
Telefoons (<768px) (Class names : .visible-xs-block, hidden-xs)

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

Medium apparaten
Desktops (≥992px) (Class names : .visible-md-block, hidden-md)

Grote apparaten
Desktops (≥1200px) (Class names : .visible-lg-block, hidden-lg)

Voor meer informatie: http://getbootstrap.com/css/#responsive-utilities

Hieronder is verouderd vanaf v3.2.0

Extra kleine apparaten
Telefoons (<768px) (Class names : .visible-xs, hidden-xs)

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

Middelgrote apparaten
Desktops (≥992px) (Class names : .visible-md, hidden-md)

Grote apparaten
Desktops (≥1200px) (Class names : .visible-lg, hidden-lg)

Veel oudere Bootstrap

.hidden-phone, .hidden-tabletenz. worden niet ondersteund/verouderd.

UPDATE:

In Bootstrap 4 zijn er 2 soorten klassen:

• De hidden-*-updie het element verbergen wanneer de viewport zich op het opgegeven breekpunt of breder bevindt.
• hidden-*-downdie het element verbergen wanneer de viewport zich op het opgegeven breekpunt of kleiner bevindt.

Ook is de nieuwe xlviewport toegevoegd voor apparaten die meer dan 1200px breed zijn. Klik hier voor meer informatie.

Antwoord 2, autoriteit 25%

Bootstrap 4 Beta Antwoord:

d-block d-md-noneom te verbergen op middelgrote, grote en extra groteapparaten.

d-none d-md-blockom te verbergen op kleine en extra kleineapparaten.

Houd er rekening mee dat u ook inline kunt door d-*-blockte vervangen door d-*-inline-block

Oud antwoord: Bootstrap 4 Alpha

• Je kunt de klassen .hidden-*-upgebruiken om je te verbergen op een bepaald formaat en grotere apparaten

  .hidden-md-upom te verbergen op middelgrote, grote en extra groteapparaten.

• Hetzelfde geldt voor .hidden-*-downom te verbergen op een bepaald formaat en kleinere apparaten

  .hidden-md-downom te verbergen op middelgrote, kleine en extra kleineapparaten

• zichtbaar-* is niet langer een optie met bootstrap 4

• Als u alleen op middelgrote apparatenwilt weergeven, kunt u de twee combineren:

  hidden-sm-downen hidden-xl-up

De geldige maten zijn:

• xsvoor telefoons in staande modus (<34em)
• smvoor telefoons in liggende modus (≥34em)
• mdvoor tablets (≥48em)
• lgvoor desktops (≥62em)
• xlvoor desktops (≥75em)

Dit was vanaf Bootstrap 4, alpha 5 (januari 2017).
Meer details hier: http://v4-alpha.getbootstrap.com/layout/responsive- hulpprogramma’s/

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

Antwoord 3, autoriteit 7%

Bootstrap 4.x antwoord

hidden-*klassen worden verwijderd vanaf Bootstrap 4 bèta en later.

Als je wilt laten zien op medium en hoger, gebruik dan de d-*klassen, bijvoorbeeld:

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

Als je alleen in het klein en hieronder wilt laten zien, gebruik dan dit:

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

Schermgrootte en klassentabel

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

In plaats van expliciete .visible-*klassen te gebruiken, maak je een element
zichtbaar door het simpelweg niet te verbergen op die schermgrootte. Je kunt combineren
één klasse .d-*-nonemet één klasse .d-*-blockom alleen een element te tonen
op een bepaald interval van schermformaten (bijv. .d-none.d-md-block.d-xl-none
toont het element alleen op middelgrote en grote apparaten).

Documentatie

Antwoord 4, autoriteit 4%

Je kunt deze moduleklasse-achtervoegsels voor elke module invoeren om beter te bepalen waar deze wordt weergegeven of verborgen.

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

http://twitter.github.com/bootstrap/scaffolding.htmlscrollen naar beneden

Antwoord 5, autoriteit 3%

Ik heb een paar verduidelijkingen om hier toe te voegen:

1) De getoonde lijst (visible-phone, visible-tablet, etc.) is verouderd in Bootstrap 3. De nieuwe waarden zijn:

• zichtbaar-xs-*
• zichtbare-sm-*
• visible-md-*
• visible-lg-*
• hidden-xs-*
• hidden-sm-*
• hidden-md-*
• hidden-lg-*

Het sterretje vertaalt zich naar het volgende voor elk (ik toon hieronder alleen zichtbaar-xs-*):

• visible-xs-block
• visible-xs-inline
• visible-xs-inline-block

2) Als je deze klassen gebruikt, voeg je geen punt ervoor toe (zoals verwarrend wordt weergegeven in een deel van het antwoord hierboven).

Bijvoorbeeld:

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

3) U kunt zichtbaar-* en verborgen-* gebruiken (bijvoorbeeld zichtbaar-xs en verborgen-xs), maar deze zijn verouderd in Bootstrap 3.2.0.

Voor meer details en de nieuwste specificaties, ga hier en zoek naar “zichtbaar”:
http://getbootstrap.com/css/

Antwoord 6

Voor de bètaversie van Bootstrap 4.0 (en ik neem aan dat dit voor de laatste keer zal blijven) is er een wijziging – houd er rekening mee dat de verborgen klassen zijn verwijderd.

Bekijk de documenten: https://getbootstrap.com/docs/4.0/utilities/ weergeven/

Om de inhoud op mobiele apparaten te verbergen en op grotere apparaten weer te geven, moet u de volgende klassen gebruiken:

d-none d-sm-block

De eerste klasse-set geeft geen weer op alle apparaten en de tweede geeft het weer voor apparaten “sm” up (u zou md, lg, enz. kunnen gebruiken in plaats van sm als u op verschillende apparaten wilt weergeven.

Ik raad aan hierover te lezen vóór de migratie:

https://getbootstrap.com/docs/4.0/migratie/#Responsief -utilities

Antwoord 7

Alle hidden-*-up, hidden-*KLASSEN WERKT NIET VOOR MIJ, dus ik voeg zelf gemaakte hiddenKlasse vóór visible-*(die werkt voor de huidige bootstrap-versie). Het is erg handig als u DAND alleen voor één scherm moet tonen en verbergen voor alle anderen.

CSS:

.hidden {display:none;}

HTML:

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

Antwoord 8

In BoosTRAP 4.1 (run fragment omdat ik de hele tabelcode van bootstrap-documentatie heeft gekopieerd):

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

@media only screen and (max-width:767px)
{
#secondary {
display: none;
}
}