Ocultando elementos no layout responsivo?


298

Olhando através do bootstrap, parece que eles suportam o recolhimento dos itens da barra de menus para telas menores. Existe algo semelhante para outros itens na página?

Por exemplo, eu tenho um junto com nav-pills flutuados para a direita. Em uma tela pequena, isso causa problemas. Eu adoraria colocá-lo em um menu suspenso semelhante ao clique para mostrar mais.

Isso é possível dentro da estrutura existente do Bootstrap?

Respostas:


648

Novas classes visíveis adicionadas ao Bootstrap

Aparelhos pequenos demais Telefones (<768px)(Class names : .visible-xs-block, hidden-xs)

Tablets para dispositivos pequenos (≥768px)(Class names : .visible-sm-block, hidden-sm)

Dispositivos médios Desktops (≥992px)(Class names : .visible-md-block, hidden-md)

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

Para mais informações: http://getbootstrap.com/css/#responsive-utilities


Abaixo está obsoleto a partir da v3.2.0


Aparelhos pequenos demais Telefones (<768px) (Class names : .visible-xs, hidden-xs)

Tablets para dispositivos pequenos (≥768px) (Class names : .visible-sm, hidden-sm)

Dispositivos médios Desktops (≥992px) (Class names : .visible-md, hidden-md)

Dispositivos grandes Desktops (≥ 1200px) (Class names : .visible-lg, hidden-lg)


Bootstrap muito mais antigo


.hidden-phone, .hidden-tablet etc. não são suportados / obsoletos.

ATUALIZAR:

No Bootstrap 4, existem 2 tipos de classes:

  • O hidden-*-upque oculta o elemento quando a janela de exibição está no ponto de interrupção especificado ou mais amplo.
  • hidden-*-down que ocultam o elemento quando a viewport está no ponto de interrupção especificado ou menor.

Além disso, a nova xljanela de visualização é adicionada para dispositivos com mais de 1200 pixels de largura. Para mais informações, clique aqui .


2
Eu não acredito .hidden-phonee .hidden-tabletestá obsoleta ** - são ** não suportado . Descontinuar tende a significar "foi substituído por outras abordagens, embora ainda haja suporte para a eliminação gradual em breve" . Este parece ser o caso do Bootstrap 3.2.0 - .visible-xse similares ainda funcionam por enquanto, enquanto os .hidden-phoneamigos estão completamente ausentes da funcionalidade do Bootstrap.
Slipp D. Thompson

2
Obrigado - atualizei a resposta com a redação correta. Agora deve ser um pouco mais claro para outros usuários.
Marc Uberstein

2
FYI Pesquisei um pouco mais - parece que “obsoleto” é comumente usado em contextos formais, pois o estado de falta de apoio segue a depreciação. Eu acho que "sem suporte" funciona tão bem, mas tanto faz. Obrigado por considerar minha sugestão anterior.
precisa

1
:) Eu adicionei os dois ... por uma questão de leigo. Obrigado por fazer um pouco mais de pesquisa sobre a redação correta, isso definitivamente o manterá em mente para futuras postagens. aplausos
Marc Uberstein

2
Observe que a atualização do Bootstrap 4 é para o bootstrap 4 alfa. Na versão de lançamento, você deve usar as classes .d-none e d- block. getbootstrap.com/docs/4.0/migration/#responsive-utilities
Pieter De Bie

137

Resposta do Bootstrap 4 Beta:

d-block d-md-nonepara esconder no médio, grande e extra grande dispositivos.

d-none d-md-blockpara esconder as pequenas e extra-pequenos dispositivos.

insira a descrição da imagem aqui

Observe que você também pode incorporar substituindo d-*-blockpord-*-inline-block


Resposta antiga: Bootstrap 4 Alpha

  • Você pode usar as classes .hidden-*-uppara se esconder em um determinado tamanho e em dispositivos maiores

    .hidden-md-uppara esconder no médio, grande e extra grande dispositivos.

  • O mesmo vale .hidden-*-downpara se esconder em um determinado tamanho e em dispositivos menores

    .hidden-md-downpara esconder em médias, pequenas e extra-pequenos dispositivos

  • visible- * não é mais uma opção com o bootstrap 4

  • Para exibir apenas em dispositivos médios , você pode combinar os dois:

    hidden-sm-down e hidden-xl-up

Os tamanhos válidos são:

  • xs para telefones no modo retrato (<34em)
  • sm para telefones no modo paisagem (≥34em)
  • md para comprimidos (≥48em)
  • lg para desktops (≥62em)
  • xl para desktops (≥75em)

Era a partir do Bootstrap 4, alfa 5 (janeiro de 2017). Mais detalhes aqui: http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

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


8
Estes foram removidos da v4 beta. Agora você usa as .d-classes para ocultar ou mostrar em tamanhos diferentes. getbootstrap.com/docs/4.0/utilities/display
DriverDan

1
Eu vi, mas ainda estou tentando resolver isso ... Como ocultar algo em uma tela pequena agora? Preciso do oposto de d-md-none, pois alterno para div dependendo da tela grande vs pequena.
Leo Muller

@LeoMuller Se você deseja que um elemento oculte no tamanho sm e abaixo, mas visível no md, lg e xl, use d-none d-md-block. code.luasoftware.com/tutorials/bootstrap/...
Desmond Lua

@DesmondLua Penso o mesmo que o LeoMuller ... no BS4, alguns elementos se comportam como blocos e outros como flexíveis ... ¿Por que devo saber anteriormente sobre a natureza do elemento BS4 de um elemento apenas se eu quiser escondê-lo nos telefones, mas eu deseja exibi-lo como padrão BS4 em tablets e laptops? É contrário à forma como você normalmente pensamos ... Espero BS4 Equipe corrigir isso antes versão final
JavierFuentes

Não consigo encontrar a documentação no d-block na documentação atual do Bootstrap 4, eles removeram isso?
Mojimi

32

Resposta do Bootstrap 4.x

hidden-* as classes são removidas do Bootstrap 4 beta em diante.

Se você deseja mostrar em médio e alto nível, use as d-*classes, por exemplo:

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

Se você deseja mostrar apenas em pequenas e abaixo, use isto:

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

Tamanho da tela e gráfico de classes

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

Em vez de usar .visible-*classes explícitas , você torna um elemento visível simplesmente não o ocultando no tamanho da tela. Você pode combinar uma .d-*-noneclasse com uma .d-*-blockclasse para mostrar um elemento apenas em um determinado intervalo de tamanhos de tela (por exemplo, .d-none.d-md-block.d-xl-none mostra o elemento apenas em dispositivos médios e grandes).

Documentação


23

Você pode inserir esses sufixos de classe de módulo para qualquer módulo para controlar melhor onde ele será exibido ou oculto.

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

http://twitter.github.com/bootstrap/scaffolding.html role para baixo


Graças - Na verdade, eu quero que eles sejam visíveis ... apenas de uma / forma condensada ruiu como barra de navegação colapso que é exclusivamente para a barra de navegação e não vejo nenhum outro tipo de apoio para outros elementos ...
Kaitlyn2004

Eles são recolhíveis com base nos nomes de classe e / ou ID. Se você localizar o CSS / JS, poderá adicionar classes / IDs adicionais que fazem a mesma coisa.
Just13very em

Alguma chance de você dar um exemplo? Eu vejo o plug-in de recolhimento, mas não tenho certeza sobre a implementação. pelo menos dentro da barra de navegação parece ser manuseado com muito automaticamente - ou pelo menos embutido no núcleo de inicialização
Kaitlyn2004

7
Obsoleto desde Bootstrap 3.
Gereltod

1
Por favor, informe que é apenas para #Bootstrap 2
Lucas Bustamante

19

Tenho alguns esclarecimentos para adicionar aqui:

1) A lista mostrada (telefone visível, tablet visível etc.) está obsoleta no Bootstrap 3. Os novos valores são:

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

O asterisco se traduz no seguinte para cada um (mostro apenas visible-xs- * abaixo):

  • bloco xs visível
  • visible-xs-inline
  • bloco-xs-visível-em-linha

2) Ao usar essas classes, você não adiciona um ponto à frente (como confundido na parte da resposta acima).

Por exemplo:

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

3) Você pode usar visible- * e hidden- * (por exemplo, visible-xs e hidden-xs), mas estes foram preteridos no Bootstrap 3.2.0.

Para mais detalhes e as especificações mais recentes, acesse aqui e pesquise "visível": http://getbootstrap.com/css/


Incorreto hidden-xs-blocknão é válido, mas visible-xs-blocké #
Hammad Khan 24/11

@hmd: Você pode fornecer uma fonte / citação para o seu comentário, que eu nem entendo completamente porque nem sequer é uma frase completa. O que exatamente você está tentando compartilhar? Você está dizendo que apenas hidden-xs-block não é válido ou você está dizendo que hidden-xs- * não é válido? Você está dizendo que hidden-md-block é válido enquanto hidden-xs-block não é? Por favor, elabore especialmente porque parece que você votou negativamente no meu comentário quando eu de fato copiei a verborragia diretamente da documentação on-line do bootstrap. Para qual versão do bootstrap você se refere no seu comentário?
Jazimov

2
ok, pode haver algumas mudanças no bootstrap. Basta olhar para a resposta mais votada, que fornece a solução correta. Com o elemento oculto, você NÃO pode usar bloco, bloco inline e inline. Com visível, você precisa usá-lo. Eu acho que eu estou usando inicialização 3.x.Just tentar a sua solução para um elemento que se esconde no telefone :)
Hammad Khan

2

Todos hidden-*-up, hidden-*aulas não funciona para mim, então eu estou adicionando self-made hiddenclasse antes visible-*(que funciona para a versão atual de inicialização). É muito útil se você precisar mostrar div apenas para uma tela e ocultar para todas as outras.

CSS:

.hidden {display:none;}

HTML:

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

1
hidden- * aulas foram lançadas em inicialização 4 beta, você agora usar d- {sm, md, lg, xl} -nenhum
Chris M

obrigado! Apenas no caso, a minha resposta ainda é válido para os não-betas
Gediminas

2

Para o Bootstrap 4.0 beta (e presumo que isso permanecerá na final), há uma alteração - esteja ciente de que as classes ocultas foram removidas.

Consulte os documentos: https://getbootstrap.com/docs/4.0/utilities/display/

Para ocultar o conteúdo no celular e exibir nos dispositivos maiores, você deve usar as seguintes classes:

d-none d-sm-block

O primeiro conjunto de classes não exibe nenhum item em todos os dispositivos e o segundo exibe os dispositivos "sm" (você pode usar md, lg etc.) em vez de sm se desejar exibir em dispositivos diferentes.

Sugiro ler sobre isso antes da migração:

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


é triste que ele não funciona normalmente com toggler colapso
David Constantine

0

No boostrap 4.1 (execute o snippet porque copiei o código da tabela inteira da documentação do Bootstrap):

.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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.