Manipulação da ordem das colunas usando col-lg-push e col-lg-pull no Twitter Bootstrap 3


159

Agora estou lendo a documentação no Twitter Bootstrap 3 e tentei seguir a ordem das colunas, como mostrado nesta página, mas atingi a parede. Não entendo por que esse código funciona nem como especificar corretamente a configuração. O que eu quero mostrar é uma grade, que consiste no comprimento 5, e o outro comprimento 5 e, finalmente, uma grade 2.

Então o meu é algo como isto:

[5] [5] [2]

E o que eu quero alcançar é que, quando visualizado na área de trabalho, o layout acima é exibido, mas quando visualizado no celular, quero mostrar primeiro o segundo objeto 5 de comprimento, depois o primeiro objeto 5 de comprimento e, finalmente, o objeto 2 de comprimento. verticalmente. Como isso:

[5] (second)
[5] (first)
[2]  

Enquanto eu tentava seguir a etapa explicada na documentação acima, obtive o primeiro objeto de comprimento 5 em relação ao segundo, apesar de estar em plataformas móveis, que, como disse, devem exibir o segundo objeto de comprimento 5 na parte superior. Em outras palavras, eu entendi isso:

[5] (first)
[5] (second)
[2] 

Então, como posso colocar corretamente o segundo sobre o primeiro? Ou como eu uso o mesmo objeto de comprimento, a ordenação da coluna não funcionou?

Aqui está o meu código para sua informação:

<div class='row'>
<div class='col-lg-5 col-lg-push-5'></div>
<div class='col-lg-5 col-lg-pull-5'></div>
<div class='col-lg-2'></div>
</div>

Além disso, a documentação não esclarece o que pullou o que pushsignifica. Então, estou perdendo alguma coisa?

Obrigado.


tente class = "col-lg-5 col-sm-5 col-sm-push-5" e mesmo para 2 com tração
Dawood Awan

Um exemplo fácil e claro (é para o layout de duas colunas, mas você entenderá o ponto imediatamente e poderá adicionar colunas adicionais conforme necessário) pode ser encontrado aqui na parte inferior da página, intitulado "Empurrar e Puxar - Alterar a Ordem das Colunas ": w3schools.com/bootstrap/bootstrap_grid_examples.asp
Tyler Rafferty

Respostas:


283

Esta resposta está dividida em três partes, veja abaixo o release oficial (v3 e v4)

Não consegui nem encontrar as classes col-lg-push-x ou pull nos arquivos originais do RC1 que baixei, portanto verifique seu arquivo bootstrap.css. espero que isso seja algo que eles resolvam no RC2.

de qualquer forma, as classes col-push- * e pull existiam e isso atenderá às suas necessidades. Aqui está uma demonstração

<div class="row">
    <div class="col-sm-5 col-push-5">
        Content B
    </div>
    <div class="col-sm-5 col-pull-5">
        Content A
    </div>
    <div class="col-sm-2">
        Content C
    </div>
</div>

EDIT: ABAIXO É A RESPOSTA DO COMUNICADO OFICIAL v3.0

Veja também Esta postagem do blog sobre o assunto

  • col-vp-push-x= empurre a coluna para a direita pelo número x de colunas, começando de onde a coluna renderizaria normalmente -> position: relative, em uma porta de visualização vp ou maior.

  • col-vp-pull-x= puxe a coluna para a esquerda pelo número x de colunas, começando de onde a coluna renderizaria normalmente -> position: relative, em uma porta de visualização vp ou maior.

    vp = xs, sm, md ou lg

    x = 1 a 12

Eu acho que o que atrapalha a maioria das pessoas é que você precisa alterar a ordem das colunas na sua marcação HTML (no exemplo abaixo, B vem antes de A) , e que ele apenas pressiona ou puxa as portas de exibição que são maior ou igual ao especificado. ou seja col-sm-push-5, empurrará apenas 5 colunas nas smportas de visualização ou mais. Isso ocorre porque o Bootstrap é uma estrutura "móvel primeiro", portanto, seu HTML deve refletir a versão móvel do seu site. Empurrar e puxar são feitos nas telas maiores.

  • (Desktop) Portas de visualização maiores são empurradas e puxadas.
  • (Móvel) Portas de exibição menores são renderizadas em ordem normal.

DEMO

<div class="row">
    <div class="col-sm-5 col-sm-push-5">
        Content B
    </div>
    <div class="col-sm-5 col-sm-pull-5">
        Content A
    </div>
    <div class="col-sm-2">
        Content C
    </div>
</div>

Porta de visualização> = sm

|A|B|C|

Porta de visualização <sm

|B|
|A|
|C|

EDIT: ABAIXO É A RESPOSTA PARA v4.0

Com a v4, vem o flexbox e outras alterações no sistema de grade e as classes push \ pull foram removidas em favor do uso de pedidos do flexbox.

  • Use .order-*classes para controlar a ordem visual (onde * = 1 a 12)
  • Isso também pode ser específico do nível da grade .order-md-*
  • Também .order-first(-1) e .order-last(13) estão disponíveis

<div class="row">
  <div class="col order-2">1st yet 2nd</div>
  <div class="col order-1">2nd yet 1st</div>
</div>


Obrigado. Alterei meus scripts importáveis ​​para aqueles que clonei no repositório do github e funcionou como esperado. Os scripts iniciais não foram incluídos col-lg-pushcomo você disse. Muito obrigado.
Blaszard

2
Obrigado, o maior do que me chamou a atenção, pois eu supunha que seria menor do que. Mas acho que o primeiro desenvolvedor para dispositivos móveis faz sentido.
Allerion

Eu acho que a segunda opção, "<= sm", deve ser apenas "<", já que não podem ambos têm "="
Shawn Taylor

2
vire a ordem das colunas (primeiro móvel), esse é o truque! obrigado!
Wietse

No Bootstrap v4, agora eles são nomeados {push / pull} - {vp} - {1-12}, por exemplo, push-md-4
pasql

36

Puxe "puxa" a div para a esquerda do navegador e e Empurre "empurra" a div para longe da esquerda do navegador.

Gostar: insira a descrição da imagem aqui

Então, basicamente, em um layout de 3 colunas de qualquer página da web, o "Corpo principal" aparece no "Centro" e, na exibição "Celular", o "Corpo principal" aparece no "Topo" da página. Isso é principalmente desejado por todos com layout de 3 colunas.

<div class="container">
    <div class="row">
        <div id="content" class="col-lg-4 col-lg-push-4 col-sm-12">
        <h2>This is Content</h2>
        <p>orem Ipsum ...</p>
        </div>

        <div id="sidebar-left" class="col-lg-4  col-sm-6 col-lg-pull-4">
        <h2>This is Left Sidebar</h2>
        <p>orem Ipsum...</p>
        </div>


        <div id="sidebar-right" class="col-lg-4 col-sm-6">
        <h2>This is Right Sidebar</h2>
        <p>orem Ipsum.... </p>
        </div>
    </div>
</div>

Você pode vê-lo aqui: http://jsfiddle.net/DrGeneral/BxaNN/1/

Espero que ajude


3
Empurre e puxe não "atribua margens". Eles alteram a ordem das colunas. No seu exemplo, a coluna Conteúdo normalmente ocuparia as colunas 1 a 4 em um tamanho grande, e a coluna Barra lateral ocuparia as colunas 5-8. Isso é baseado no pedido deles na marcação. Você pode alterar a ordem deles, alterando-os na marcação, mas se por algum motivo não desejar (por exemplo, tornar o código mais semântico com o conteúdo principal), você poderá alterar a ordem com as classes push e pull.
T Nguyen

1
(continuação) No seu exemplo, adicionar col-lg-push-4alterações na coluna Conteúdo das colunas 1-4 a 5-8 pressionando 4 colunas. Da mesma forma, col-lg-pull-4'puxa' a coluna da Barra Lateral de 5-8 para 1-4.
T Nguyen

1
col - $$ - offset XX aplica valores de margem esquerda
beauXjames

16

Equívoco Um equívoco comum com a ordenação de colunas é que eu deveria (ou poderia) fazer push e pull em dispositivos móveis e que as visualizações da área de trabalho devem renderizar na ordem natural da marcação. Isto está errado.

O Reality Bootstrap é um primeiro framework móvel. Isso significa que a ordem das colunas na sua marcação HTML deve representar a ordem em que você deseja que elas sejam exibidas em dispositivos móveis. Isso significa que o envio e a retirada são feitos nas visualizações maiores da área de trabalho. não na exibição de dispositivos móveis.

Brandon Schmalz - Desenvolvedor da Web Full Stack Veja aqui a descrição completa


15

Eu apenas senti que adicionaria meus US $ 0,2 a essas 2 boas respostas. Tive um caso em que tive que mover a última coluna até o topo em uma situação de três colunas.

[ABC]

para

[C]

[UMA]

[B]

A classe do Boostrap .col-xx-push-Xnão faz mais nada, mas empurra uma coluna para a direita, left: XX%; então tudo o que você precisa fazer para empurrar uma coluna para a direita é adicionar o número de pseudo-colunas que ficam à esquerda.

Nesse caso:

  • duas colunas ( col-md-5e col-md-3) vão para a esquerda, cada uma com o valor da que está indo para a direita;

  • um ( col-md-4) está indo para a direita pela soma dos dois primeiros indo para a esquerda (5 + 3 = 8);


<div class="row">
    <div class="col-md-4 col-md-push-8 ">
        C
    </div>
    <div class="col-md-5 col-md-pull-4">
        A
    </div>
    <div class="col-md-3 col-md-pull-4">
        B
    </div>
</div>

insira a descrição da imagem aqui


2

Se você precisar organizar dados em colunas de 1/2/4, dependendo do tamanho da janela de visualização, pressionar e puxar pode não ser uma opção. Não importa como você solicita seus itens em primeiro lugar, um dos tamanhos pode fornecer um pedido errado.

Uma solução nesse caso é usar linhas e colunas aninhadas sem nenhuma classe push ou pull.

Exemplo

No XS você quer ...

A
B
C
D
E
F
G
H

Na SM você quer ...

A   E
B   F
C   G
D   H

No MD e acima, você quer ...

A   C   E   G
B   D   F   H


Solução

Use elementos filho aninhados de duas colunas em um elemento pai de duas colunas circundante:

Aqui está um trecho de trabalho:

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript" ></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-sm-6">
    <div class="row">
      <div class="col-md-6"><p>A</p><p>B</p></div>
      <div class="col-md-6"><p>C</p><p>D</p></div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="row">
      <div class="col-md-6"><p>E</p><p>F</p></div>
      <div class="col-md-6"><p>G</p><p>H</p></div>
    </div>
  </div>
</div>

Outra beleza dessa solução é que os itens aparecem no código em sua ordem natural (A, B, C, ... H) e não precisam ser embaralhados, o que é bom para a geração do CMS.

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.