Colunas
Aprenda a modificar colunas com várias opções de alinhamento, ordenação e deslocamento graças ao nosso sistema de grade flexbox. Além disso, veja como usar classes de coluna para gerenciar larguras de elementos que não são de grade.
Como eles trabalham
-
As colunas são construídas na arquitetura flexbox da grade. Flexbox significa que temos opções para alterar colunas individuais e modificar grupos de colunas no nível da linha . Você escolhe como as colunas crescem, diminuem ou mudam de outra forma.
-
Ao construir layouts de grade, todo o conteúdo vai em colunas. A hierarquia da grade do Bootstrap vai de contêiner para linha para coluna para o seu conteúdo. Em raras ocasiões, você pode combinar conteúdo e coluna, mas esteja ciente de que pode haver consequências não intencionais.
-
O Bootstrap inclui classes predefinidas para criar layouts rápidos e responsivos. Com seis pontos de interrupção e uma dúzia de colunas em cada camada de grade, temos dezenas de classes já construídas para você criar os layouts desejados. Isso pode ser desativado via Sass, se desejar.
Alinhamento
Use utilitários de alinhamento flexbox para alinhar colunas vertical e horizontalmente.
Alinhamento vertical
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
Alinhamento horizontal
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-evenly">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
Quebra de coluna
Se mais de 12 colunas forem colocadas em uma única linha, cada grupo de colunas extras será, como uma unidade, agrupado em uma nova linha.
Como 9 + 4 = 13 > 12, esse div de 4 colunas é agrupado em uma nova linha como uma unidade contígua.
As colunas subsequentes continuam ao longo da nova linha.
<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
</div>
Quebras de coluna
Quebrar colunas para uma nova linha no flexbox requer um pequeno truque: adicione um elemento width: 100%
onde você deseja envolver suas colunas em uma nova linha. Normalmente, isso é feito com vários .row
s, mas nem todos os métodos de implementação podem explicar isso.
<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>
Você também pode aplicar essa quebra em pontos de interrupção específicos com nossos utilitários de exibição responsivos .
<div class="container">
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
</div>
Reordenando
Encomendar aulas
Use .order-
classes para controlar a ordem visual do seu conteúdo. Essas classes são responsivas, então você pode definir o order
ponto de interrupção por (por exemplo, .order-1.order-md-2
). Inclui suporte para todas as seis camadas de grade 1
.5
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-5">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>
Existem também classes responsivas .order-first
e que alteram o de um elemento aplicando e , respectivamente. Essas classes também podem ser misturadas com as classes numeradas conforme necessário..order-last
order
order: -1
order: 6
.order-*
<div class="container">
<div class="row">
<div class="col order-last">
First in DOM, ordered last
</div>
<div class="col">
Second in DOM, unordered
</div>
<div class="col order-first">
Third in DOM, ordered first
</div>
</div>
</div>
Colunas de compensação
Você pode deslocar colunas de grade de duas maneiras: nossas .offset-
classes de grade responsivas e nossos utilitários de margem . As classes de grade são dimensionadas para corresponder às colunas, enquanto as margens são mais úteis para layouts rápidos em que a largura do deslocamento é variável.
Classes de deslocamento
Mova as colunas para a direita usando .offset-md-*
classes. Essas classes aumentam a margem esquerda de uma coluna por *
colunas. Por exemplo, .offset-md-4
move -se .col-md-4
por quatro colunas.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
</div>
Além de limpar a coluna em pontos de interrupção responsivos, pode ser necessário redefinir os deslocamentos. Veja isso em ação no exemplo de grade .
<div class="container">
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
</div>
Utilitários de margem
Com a mudança para o flexbox na v4, você pode usar utilitários .me-auto
de margem como forçar colunas irmãs para longe umas das outras.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
<div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
</div>
<div class="row">
<div class="col-auto me-auto">.col-auto .me-auto</div>
<div class="col-auto">.col-auto</div>
</div>
</div>
Classes de coluna autônomas
As .col-*
classes também podem ser usadas fora de a .row
para dar a um elemento uma largura específica. Sempre que as classes de coluna são usadas como filhos não diretos de uma linha, os preenchimentos são omitidos.
<div class="col-3 bg-light p-3 border">
.col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
.col-sm-9: width of 75% above sm breakpoint
</div>
As classes podem ser usadas em conjunto com utilitários para criar imagens flutuantes responsivas. Certifique-se de envolver o conteúdo em um .clearfix
wrapper para limpar o float se o texto for mais curto.
Um parágrafo de texto de espaço reservado. Estamos usando aqui para mostrar o uso da classe clearfix. Estamos adicionando algumas frases sem sentido aqui para demonstrar como as colunas interagem aqui com a imagem flutuante.
Como você pode ver, os parágrafos envolvem graciosamente a imagem flutuante. Agora imagine como isso ficaria com algum conteúdo real aqui, em vez de apenas esse texto de espaço reservado chato que continua e continua, mas na verdade não transmite nenhuma informação tangível. Simplesmente ocupa espaço e não deve ser lido.
E, no entanto, aqui está você, ainda perseverando na leitura deste texto de espaço reservado, esperando por mais alguns insights, ou algum easter egg escondido de conteúdo. Uma piada, talvez. Infelizmente, não há nada disso aqui.
<div class="clearfix">
<img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">
<p>
A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
</p>
<p>
As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
</p>
<p>
And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
</p>
</div>