Używanie Bootstrap 3 Jak ukryć kolumny w moim stole?

Próbuję ukryć kolumny dla mojego responsywnego projektu, gdy są w col-xs i col-sm. Najpierw spróbowałem użyć klas hidden-xs/hidden-sm, ale to nie zadziałało. Próbowałem również używać visible-desktop jak wspomniano tutaj: Twitter Bootstrap Responsive - Show Table Column only on Desktop Używanie Bootstrap 3 Jak ukryć kolumny w moim stole?

To też nie zadziałało. Jaki jest najlepszy sposób na zrobienie tego? Raczej nie robię dwóch oddzielnych tabel, a potem ukrywam jeden lub drugi.

kod próbowałem, który nie jest obecnie pracuje:

<table> 
    <thead> 
     <th>Show All the time</th> 
     <th class="hidden-xs hidden-sm">Hide in XS and SM</th> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Show All the time</td> 
      <td class="hidden-xs hidden-sm">Hide in XS and SM</td> 
     </tr> 
    </tbody> 
</table>

Źródło

2013-08-21 daveomcd

Wygląda na stanowisku ty włączone, 'ukrytych telefon ukrytych tablet' użyto zamiast' widzialnym desktop'. Czy próbowałeś tego? – jlars62

Próbowałem również tych dwóch, ale nadal nie wpłynęły na moje tabele. Być może robię ich źle? '' & ''. – daveomcd

Bootstrap 3? ukryty-xs/hidden-sm powinien działać. Czy możesz opublikować wypróbowany kod? – ZimSystem

Kod powinien działać dobrze. Bootstrap obsługuje ukrywanie/pokazywanie th i td z jego reagujących klasach użytkowych https://github.com/twbs/bootstrap/blob/master/less/mixins.less#L504:

// Responsive utilities 
// ------------------------- 
// More easily include all the states for responsive-utilities.less. 
.responsive-visibility() { 
    display: block !important; 
    tr& { display: table-row !important; } 
    th&, 
    td& { display: table-cell !important; } 
} 

.responsive-invisibility() { 
    display: none !important; 
    tr& { display: none !important; } 
    th&, 
    td& { display: none !important; } 
}

Kod działa w tym jsFiddle: http://jsfiddle.net/A4fQP/

Źródło

2013-08-21 18:52:59

Wygląda na to, że Bootstrap 3.2.0 wycofał to podejście: "Klasy: .visible-xs, .visible-sm, .visible-md i .visible-lg również istnieją, ale ** są nieaktualne od wersji 3.0.0 ** Są one w przybliżeniu równoważne.visible - \ * - block, z wyjątkiem dodatkowych specjalnych przypadków do przełączania elementów powiązanych z

. "Oznacza to, że nie ma oficjalnego sposobu przełączania widoczności dla kolumn tabeli. Czy wiesz, czy to prawda? –

Niedawno napotkasz podobny problem, pracuje na wyświetlanie tabeli różnie, w zależności od na rozmiarze ekranu. Zadanie polegało na ukryciu jednej kolumny na większym ekranie i wyświetleniu jej na urządzeniu mobilnym podczas ukrywania trzech innych kolumn ("jedna" kolumna jest sumą danych w kolumnach "trzech". . wykorzystywane zapytania mediów, ale wyrzucać gotowych poglądów bootstrap w ogóle dodałem klasach th i td tagów zaangażowanych do

Wygląda bardzo podobnie jak ten:.

.full_view { 
width: 50px; 
    @media(max-width: 768px){ 
    display: none; 
    } 
} 

.small_view { 
    width: 50px; 
    @media(min-width: 768px){ 
    display: none; 
    } 
}

Źródło

2014-02-24 18:32:01 ffej

wydaje hidden-xs/hidden-sm pracował wcześniej od przyjęta odpowiedź ma wiele głosów w górę, jednak przykład skrzypiec nie działa dla mnie, gdy zmieniam rozmiar obszaru.Jakie działa dla mnie jest jednak odwrotna logika przy użyciu visible-md/visible-lg. Nie mogę zrozumieć, dlaczego, ponieważ zgodnie z dokumentacją Bootstrap powinien nadal obsługiwać hidden-xs/hidden-sm.

skrzypce robocza: http://jsfiddle.net/h1ep8b4f/

<table> 
    <thead> 
     <th>Show All the time</th> 
     <th class="visible-md visible-lg">Hide in XS and SM</th> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Show All the time</td> 
      <td class="visible-md visible-lg">Hide in XS and SM</td> 
     </tr> 
    </tbody> 
</table>

Źródło

2016-08-10 09:00:59 Ogglas

Powiązane problemy

Używanie Bootstrap 3 Jak ukryć kolumny w moim stole?

Odpowiedz

Powiązane problemy