Cinco colunas iguais no twitter bootstrap


361

Quero ter 5 colunas iguais em uma página que estou construindo e não consigo entender como a grade de 5 colunas está sendo usada aqui: http://web.archive.org/web/20120416024539/http://domain7 .com / mobile / tools / bootstrap / responsivo

A grade de cinco colunas está sendo demonstrada acima, parte da estrutura de inicialização do twitter?


Você está vendo uma versão muito antiga do bootstrap. Você quer ter uma grade "responsiva" de 5 colunas na (mais recente, espero) inicialização?
Andres Ilich 30/04

3
Se você está procurando por uma solução para o seu problema, entre em contato conosco através do formulário abaixo, que responderemos o mais breve possível. seria possível ter 5 colunas iguais sem precisar mudar muitas coisas.
Gandalf

você pode, sim, mas exigirá modificações pesadas em alguns dos elementos da grade e também nos elementos da grade responsivos. O seu site é responsivo? Seria um pouco mais fácil encontrar uma resposta dessa maneira, caso contrário, seria muito código.
Andres Ilich

Sim, o site é responsivo, mas eu teria que modificar também os elementos da grade, e não a parte responsiva.
Gandalf

11
Estou tendo algum sucesso * com .container.one-5th.column {width: 17%; } embora eu esteja esperando algo horrível para tirar o fôlego. 17,87847% também.
Gandalf

Respostas:


407

Use cinco divs com uma classe de span2 e dê ao primeiro uma classe de offset1.

<div class="row-fluid">
    <div class="span2 offset1"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
</div>

Voila! Cinco colunas igualmente espaçadas e centralizadas.


No bootstrap 3.0, esse código seria semelhante a

<div class="row">
    <div class="col-md-2 col-md-offset-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
</div>

44
não tem largura total. é bom embora
machineaddict

45
A solução que publiquei tem largura total e cria 5 colunas iguais: AQUI ESTÁ A RESPOSTA .
Fizzix

5
Não tem largura total, como a resposta @fizzix fornece abaixo. Cria uma margem indesejada de ambos os lados, assim: jsfiddle.net/wdo8L1ww
Fizzix

3
colunas parecem pequenas com esta solução, então prefiro a solução
@fizzix

2
O Bootstrap 4 5 cols (largura total) não requer CSS ou SASS: stackoverflow.com/a/42226652/171456
Zim

526

Para o Bootstrap 3 e superior

Um layout fantástico de 5 colunas de largura total com o Twitter Bootstrap foi criado aqui .

Essa é, de longe, a solução mais avançada, pois funciona perfeitamente com o Bootstrap 3. Permite reutilizar as classes repetidamente, em conjunto com as classes atuais do Bootstrap para um design responsivo.

CSS:
adicione isso à sua folha de estilo global ou mesmo à parte inferior do seu bootstrap.cssdocumento.

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}

Coloque-o em uso!
Por exemplo, se você deseja criar um elemento div que se comporta como um layout de cinco colunas em telas médias e como duas colunas em telas menores, basta usar algo como isto:

<div class="row">
    <div class="col-md-5ths col-xs-6">
       ...
    </div>
</div>

DEMONSTRAÇÃO DE TRABALHO - Expanda o quadro para ver as colunas se tornarem responsivas.

OUTRA DEMO - Incorporando as novascol-*-5thsclasses a outras comocol-*-3ecol-*-2 . Redimensione o quadro para ver todos mudarem para a col-xs-6visualização responsiva.


Para o Bootstrap 4

O Bootstrap 4 agora usa flexbox por padrão, para que você tenha acesso aos seus poderes mágicos diretamente da caixa. Confira as colunas de layout automático que ajustam dinamicamente a largura, dependendo de quantas colunas estão aninhadas.

Aqui está um exemplo:

<div class="row">
   <div class="col">
      1 of 5
   </div>
   <div class="col">
      2 of 5
   </div>
   <div class="col">
      3 of 5
   </div>
   <div class="col">
      4 of 5
   </div>
   <div class="col">
      5 of 5
   </div>
</div>

DEMO DE TRABALHO


11
Ligar para eles col-*-15pode ser confuso. Parece implicar que eles fazem parte de um sistema de grade de 15 colunas, o que não são.
Paul D. Waite

2
@ PaulD.Waite - Adicionei uma pequena nota à minha resposta para informar as pessoas.
Fizzix

2
col-*-15está bem comigo, mas col-*-5thspode ser um nome de coluna um pouco menos confuso. É isso que estou usando para que meus outros desenvolvedores não me confundam.
Mordred

3
Hey @scragar - Se você visualizar o estilo de todas as classes de coluna atuais do Bootstrap, notará que todas elas contêm position:relative; min-height: 1px; padding-right: 15px; padding-left: 15px;. Basicamente, o código que publiquei está apenas estendendo isso para que eles correspondam exatamente ao estilo incorporado do Bootstrap. Aplico então uma largura de 20%modo que 5 colunas iguais possam caber na página. Muito simples :)
Fizzix

11
que tal nomear uma coluna 2/5? Ou devemos usar: col-md-1ths para 1/5 e col-md-2ths para 2/5, col-md-5ths para 5/5 = largura total?
Alex

166

Para o Bootstrap 3 , se você deseja largura total e está usando LESS, SASSou algo semelhante, tudo que você precisa fazer é usar as funções mixin do Bootstrap make-md-column ,make-sm-column , etc.

MENOS:

.col-lg-2-4{
  .make-lg-column(2.4)
}
.col-md-2-4{
  .make-md-column(2.4)
}
.col-sm-2-4{
  .make-sm-column(2.4)
}

SASS:

.col-lg-2-4{
  @include make-lg-column(2.4)
}
.col-md-2-4{
  @include make-md-column(2.4)
}
.col-sm-2-4{
  @include make-sm-column(2.4)
}

Não só você pode construir verdadeiras aulas de coluna de bootstrap de largura total que usam esses mixins, mas você também pode construir todas as classes auxiliares relacionados como .col-md-push-*, .col-md-pull-*, e .col-md-offset-*:

MENOS:

.col-md-push-2-4{
  .make-md-column-push(2.4)
}
.col-md-pull-2-4{
  .make-md-column-pull(2.4)
}
.col-md-offset-2-4{
  .make-md-column-offset(2.4)
}

SASS:

.col-md-push-2-4{
  @include make-md-column-push(2.4)
}
.col-md-pull-2-4{
  @include make-md-column-pull(2.4)
}
.col-md-offset-2-4{
  @include make-md-column-offset(2.4)
}

Outras respostas falam sobre a configuração @gridColumnsque é perfeitamente válida, mas isso altera a largura da coluna principal para todo o bootstrap. O uso das funções mixin acima adicionará o layout de 5 colunas sobre as colunas padrão de autoinicialização, para que não quebre nenhuma ferramenta de terceiros ou estilo existente.


5
A solução mais limpa, como 2.4é o 5º de 12 ( 2.4*5=12), funciona para o Bootstrap 3 em uma grade de 12 colunas. Também se aplica a make-xs, make-smmas não vai funcionar combinados para outras definições col padrão (mais recente prioridade get)
Sherbrow

6
Estou chocado com os comparativamente poucos votos positivos para esta resposta. É de longe o menos invasivo, usando não apenas a mesma convenção de nomenclatura que outras classes de coluna do Bootstrap, mas também os mesmos mixins que o Bootstrap usa para criar suas próprias colunas, tornando-o provavelmente à prova de futuro até o Bootstrap 4, no mínimo.
Chris Fritz

3
Esta deveria ser a melhor resposta. Eu criei uma biblioteca (para incluir offset, pulle push) com base em isso para o meu próprio uso. Sinta-se livre para dar uma olhada
Kenny Ki

11
Como todos disseram, sim, agora é a resposta correta. @Sherbrow disseram que "não vai funcionar combinados para outras definições col standard", mas isso não é porque esta solução é errado, de alguma forma, a sua simplesmente porque 12% 5 = 0.!
Nick M

2
@ lightswitch05 Infelizmente, isso não era adequado para mim, porque eu tinha uma quantidade dinâmica de colunas. Se eu tivesse apenas uma coluna, ainda queria que fosse a quinta tela, mas, usando a resposta da Fizzix, uma única coluna cobriria a tela inteira. Consegui resolvê-lo usando as novas funções de mixin do Bootstrap 4. Eu poderia atualizar sua resposta para incluir isso, se quiser?
Plog 07/02

40

Atualização 2019

Bootstrap 4.1 ou superior

Aqui estão 5 colunas iguais e de largura total ( sem CSS ou SASS extra ) usando a grade de layout automático :

<div class="container-fluid">
    <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
    </div>
</div>

http://www.codeply.com/go/MJTglTsq9h

Esta solução funciona porque o Bootstrap 4 agora é flexbox. Você pode fazer com que as 5 colunas se agrupem na mesma .rowusando uma quebra como <div class="col-12"></div>ou<div class="w-100"></div> a cada 5 colunas.

Veja também: Bootstrap - layout de 5 colunas


2
Mal posso esperar para que ela seja estável :)
nicolallias

2
Bom, mas só funciona com linhas de 5 elementos. Se você recebe mais, está errado. Veja meu violino enhenced aqui: jsfiddle.net/djibe89/ntq8h910
djibe

É por isso que expliquei que você deve usar o intervalo a cada 5 colunas. Sua solução funciona, mas requer CSS extra.
Zim

Além disso, considere adicionar flex-nowrapao .rowdado que as colunas (automáticas) podem exceder a largura pai.
Luuk Skeur 19/09/19

31

Abaixo está uma combinação das respostas @machineaddict e @Mafnah, reescritas para o Bootstrap 3 (funcionando até agora até mim):

@media (min-width: 768px){
    .fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2  {
        width: 20%;
        *width: 20%;
    }
}
@media (min-width: 1200px) {
    .fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 {
        width: 20%;
        *width: 20%;
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    .fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 {
        width: 20%;
        *width: 20%;
    }
}

Onde coloco isso e como o uso?
sergserg

11
@Serg 1. Coloque-a abaixo / após o arquivo css Bootstrap 2. Adicione a classe .fivecolumns ao .Row, então ninho cinco colunas com o .col classe [, - manutenção programada, -LG] -2
plaidcorp

Em alguns casos, a largura total não é perfeita.
Fizzix 12/08/14

Por que col-xs-2 não é adicionado às declarações?
ganders

@ ganders apenas uma visão geral; confira outra resposta nessa página: stackoverflow.com/questions/10387740/...
plaidcorp

27

Mantenha o bootstrap original com 12 colunas, não o personalize. A única modificação que você precisa fazer é alguns css depois o css responsivo de bootstrap original, como este:

O código a seguir foi testado para o Bootstrap 2.3.2:

<style type="text/css">
/* start of modification for 5 columns */
@media (min-width: 768px){
    .fivecolumns .span2 {
        width: 18.297872340425532%;
        *width: 18.2234042553191494%;
    }
}
@media (min-width: 1200px) {
    .fivecolumns .span2 {
        width: 17.9487179487179488%;
        *width: 17.87424986361156592%;
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    .fivecolumns .span2 {
        width: 17.79005524861878448%;
        *width: 17.7155871635124022%;
    }
}
/* end of modification for 5 columns */
</style>

E o html:

<div class="row-fluid fivecolumns">
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
</div>

Nota: Mesmo que o span2 vezes 5 não seja igual a 12 colunas, você terá a ideia :)

Um exemplo de trabalho pode ser encontrado aqui http://jsfiddle.net/v3Uy5/6/


10

Caso você não precise exatamente da mesma largura de colunas, tente criar 5 colunas usando o aninhamento:

<div class="container">
    <div class="row">
        <div class="col-xs-5">
            <div class="row">
                <div class="col-xs-6 column">Column 1</div>
                <div class="col-xs-6 column">Column 2</div>
            </div>
        </div>
        <div class="col-xs-7">
            <div class="row">
                <div class="col-xs-4 column">Column 3</div>
                <div class="col-xs-4 column">Column 4</div>
                <div class="col-xs-4 column">Column 5</div>
            </div>
        </div>
    </div>
</div>

jsfiddle

As duas primeiras colunas terão largura igual a 5/12 * 1/2 ~ 20.83%

As últimas três colunas: 7/12 * 1/3 ~ 19,44%

Esse hack fornece o resultado aceitável em muitos casos e não requer nenhuma alteração de CSS (estamos usando apenas as classes nativas de inicialização).


9

Crie um download personalizado do Bootstrap para o layout de 5 colunas

Vá para a página de personalização do Bootstrap 2.3.2 (ou Bootstrap 3 ) e defina as seguintes variáveis ​​(não insira ponto e vírgula):

@gridColumns:           5;
@gridColumnWidth:       172px;
@gridColumnWidth1200:   210px;
@gridColumnWidth768:    128px;
@gridGutterWidth768:    21px;

Faça o download da sua compilação. Essa grade caberia nos contêineres padrão, preservando as larguras padrão da sarjeta (quase).

Nota: Se você estiver usando LESS, atualize variables.less.


7

Com o flexbox http://output.jsbin.com/juziwu

.flexrow {
  display: flex;
  background: lightgray; /*for debug*/
}
.flexrow > * {
  flex: 1;
  margin: 1em;
  outline: auto green;
}
<div class="flexrow">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...<br>..</div>
  <div>...</div>
</div>


O flexbox é melhor que o bootstrap, se for adequado às suas necessidades.
ml242

6

Votei na resposta de Mafnah, mas olhando para isso novamente, sugiro que o seguinte seja melhor se você estiver mantendo as margens padrão etc.

<div class="equal row-fluid">
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
</div>

.equal .span2 {
    width: 17.9%;
}

11
A largura real é 17,94872% e não responde, você precisará definir uma nova margem para cada coluna em todas as consultas @media.
Julio

5
<div class="equal row-fluid">
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
</div>

.equal .span2 {
    width: 20%;
}

11
isso deve ser .equal .span2 {width: 20%; }
Studio4

... e não está funcionando. cada coluna, exceto a primeira, tem margem restante.
Julio

5

Crie 5 elementos com a classe col-sm-2 e adicione ao primeiro elemento também a classe col-sm-offset-1

Ps: isso não terá largura total (será recuado um pouco da direita e da esquerda da tela)

O código deve se parecer com isso

<div class="col-sm-2 col-sm-offset-1"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>

5

Bootstrap 4, número variável de colunas por linha

Se você deseja ter até cinco colunas por linha, para que menos números de colunas ainda ocupem apenas 1/5 da linha cada, a solução é usar os mixins do Bootstrap 4 :

SCSS:

.col-2-4 {
    @include make-col-ready(); // apply standard column margins, padding, etc.
    @include make-col(2.4); // 12/5 = 2.4
}
.col-sm-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(sm) {
        @include make-col(2.4);
    }
}
.col-md-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(md) {
        @include make-col(2.4);
    }
}
.col-lg-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(lg) {
        @include make-col(2.4);
    }
}
.col-xl-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(xl) {
        @include make-col(2.4);
    }
}

HTML:

<div class="container">    
  <div class="row">
    <div class="col-12 col-sm-2-4">1 of 5</div>
    <div class="col-12 col-sm-2-4">2 of 5</div>
    <div class="col-12 col-sm-2-4">3 of 5</div>
    <div class="col-12 col-sm-2-4">4 of 5</div>
    <div class="col-12 col-sm-2-4">5 of 5</div>
  </div>
  <div class="row">
    <div class="col-12 col-sm-2-4">1 of 2</div> <!-- same width as column "1 of 5" above -->
    <div class="col-12 col-sm-2-4">2 of 2</div> <!-- same width as column "2 of 5" above -->
  </div>
</div>

4

Outra maneira de ativar 5 colunas no Bootstrap 3 é modificar o formato de 12 colunas usado por padrão pelo Bootstrap. E, em seguida, crie uma grade de 20 colunas (use customize no site Bootstrap OU use a versão LESS / SASS).

Para personalizar no site de inicialização, vá para a página Personalizar e fazer download , atualize a variável @grid-columnsde 12para 20. Então você poderá criar 4 e 5 colunas.


3

Isso pode ser feito com o aninhamento e com um pequeno deslocamento de CSS.

<div class="col-sm-12">
<div class="row">
  <div class="col-sm-7 five-three">
    <div class="row">
      <div class="col-sm-4">
      Column 1
      </div>
      <div class="col-sm-4">
      Column 2
      </div>
      <div class="col-sm-4">
      Column 3
      </div><!-- end inner row -->
    </div>
  </div>
  <div class="col-sm-5 five-two">
    <div class="row">
      <div class="col-sm-6">
        Col 4
      </div>
      <div class="col-sm-6">
      Col 5
      </div>
    </div><!-- end inner row -->
  </div>
</div><!-- end outer row -->

Então alguns css

@media  (min-width: 768px) {
div.col-sm-7.five-three {
width: 60% !important;
}

div.col-sm-5.five-two {
width: 40% !important;
}

}

Aqui está um exemplo: 5 exemplo de coluna igual

E aqui está minha escrita completa no coderwall

Cinco colunas iguais no bootstrap 3


3

Na minha opinião, é melhor usá-lo assim com menos sintaxe. Esta resposta é baseada na resposta de @fizzix

Dessa forma, as colunas usam variáveis ​​(@ grid-gutter-width, pontos de interrupção da mídia) que o usuário pode substituir e o comportamento de cinco colunas corresponde ao comportamento da grade de 12 colunas.

/*
 * Special grid for ten columns, 
 * using its own scope 
 * so it does not interfere with the rest of the code
 */

& {
    @import (multiple) "../bootstrap-3.2.0/less/variables.less";
    @grid-columns: 5;
    @import  (multiple) "../bootstrap-3.2.0/less/mixins.less";

    @column: 1;
    .col-xs-5ths {
        .make-xs-column(@column);
    }

    .col-sm-5ths {
        .make-sm-column(@column);
    }

    .col-md-5ths {
        .make-md-column(@column);
    }

    .col-lg-5ths {
        .make-lg-column(@column);
    }
}

/***************************************/
/* Using default bootstrap now
/***************************************/

@import  (multiple) "../bootstrap-3.2.0/less/variables.less";
@import  (multiple) "../bootstrap-3.2.0/less/mixins.less";

/* ... your normal less definitions */


3

Por padrão, o Bootstrap não fornece um sistema de grade que nos permita criar um layout de cinco colunas, você precisa criar uma definição de coluna padrão da maneira que o Bootstrap cria algumas classes personalizadas e consultas de mídia em seu arquivo css

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}
.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

e algum código html

<div class="row">
    <div class="col-md-15 col-sm-3">
    ...
    </div>
</div>

3

Por padrão, o Bootstrap pode escalar até 12 colunas? Isso significa que, se quisermos criar um layout de 12 colunas de igual largura, escreveremos dentro de div class = "col-md-1" doze vezes.

<div class="row">
<div class="col-md-1"></div>    
<div class="col-md-2">1</div>
<div class="col-md-2">2</div>
<div class="col-md-2">3</div>
<div class="col-md-2">4</div>
<div class="col-md-2">5</div>
<div class="col-md-1"></div>
</div>

3

Layout de 5 colunas com o estilo Bootstrap do Twitter

.col-xs-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-15 {
    width: 100%;
    float: left;
}
@media (min-width: 768px) {
.col-xs-15 {
        width: 50%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-xs-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-xs-15 {
        width: 20%;
        float: left;
    }
}

3

Uma solução que não exige muito CSS nem aprimora o layout padrão de 12col de autoinicialização:

http://jsfiddle.net/0ufdyeur/1/

HTML:

<div class="stretch">
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
</div>

CSS:

@media (min-width: 1200px) { /*if not lg, change this criteria*/
  .stretch{
    width: 120%; /*the actual trick*/
  }
}

3

Basta criar uma nova classe e definir seu comportamento para cada consulta de mídia, conforme necessário

@media(min-width: 768px){
  .col-1-5{
    width: 20%;
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 5px;
    padding-left: 5px;
  }
}

<div class="container-fluid">
  <div class="row">
    <div class="col-1-5">col 1</div>
    <div class="col-1-5">col 2</div>
    <div class="col-1-5">col 3</div>
    <div class="col-1-5">col 4</div>
    <div class="col-1-5">col 5</div>
  </div>
</div>

aqui está uma demonstração de trabalho https://codepen.io/giorgosk/pen/BRVorW


2

No bootstrap 3, acho que podemos fazer algo assim, para remover as margens esquerda e direita:

<div class="row this_row">
    <div class="col-md-2 col-md-offset-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
</div>

e CSS

.this_row {
    margin: 0 -5%;
}

2

Como você pode adicionar uma grade de 5 colunas no bootstrap

.col-lg-1-5,.col-md-1-5,.col-sm-1-5,.col-xs-1-5{min-height:1px;padding-left:15px;padding-right:15px;position:relative; width:100%;box-sizing:border-box;}
.item{width:100%;height:100px; background-color:#cfcfcf;}
.col-xs-1-5{width: 20%;float:left;} }

@media (min-width: 767px){ .col-sm-1-5{width: 20%;float:left;} }
@media (min-width: 992px){ .col-md-1-5{width: 20%;float:left;} }
@media (min-width: 1200px){ .col-lg-1-5{width: 20%;float:left;} }
<div class="row">
  <div class="col-sm-1-5">
    <div class="item">Item 1</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 2</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 3</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 4</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 5</div>
  </div>
</div>


2

a solução mais fácil sem a necessidade de editar CSS seria:

<div class="row">
  <div class="btn-group btn-group-justified">
    <div class="btn-group">
      <div class="col-sm-12">Column 1</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 2</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 3</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 4</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 5</div>
    </div>
  </div>
</div>

E se você precisar que eles ultrapassem qualquer ponto de interrupção, basta bloquear o grupo btn. Espero que isso ajude alguém.


2

Claramente, cinco colunas não fazem parte do projeto de inicialização.

Mas com o Bootstrap v4 (alpha), existem duas coisas para ajudar com um layout de grade complicado

  1. Flex ( http://v4-alpha.getbootstrap.com/getting-started/flexbox/ ), o novo tipo de elemento (official - https://www.w3.org/TR/css-flexbox-1/ )
  2. Utilitários responsivos ( http://v4-alpha.getbootstrap.com/layout/responsive-utilities/ )

Em termos simples, estou usando

<style>
.flexc { display: flex; align-items: center; padding: 0; justify-content: center; }
.flexc a { display: block; flex: auto; text-align: center; flex-basis: 0; }
</style>
<div class="container flexc hidden-sm-down">
  <!-- content to show in MD and larger viewport -->
  <a href="#">Link/Col 1</a>
  <a href="#">Link/Col 2</a>
  <a href="#">Link/Col 3</a>
  <a href="#">Link/Col 4</a>
  <a href="#">Link/Col 5</a>
</div>
<div class="container hidden-md-up">
  <!-- content to show in SM and smaller viewport, I don't think 5 cols in smaller viewport are gonna be alright :) -->
</div>

Seja 5,7,9,11,13 ou algo do tipo, tudo ficará bem. Tenho certeza de que o padrão de 12 grades pode atender a mais de 90% dos casos de uso - então vamos projetar dessa maneira - também se desenvolvem mais facilmente!

O bom tutorial sobre flex está aqui " https://css-tricks.com/snippets/css/a-guide-to-flexbox/ "


2

Criei definições de mixin SASS com base em definições de autoinicialização para qualquer número de colunas (pessoalmente, ao lado de 12, uso 8, 10 e 24):

// Extended bootstrap grid system
//
// Framework grid generation
//
// Based on Bootstrap 'bootstrap/_grid-framework.scss'. Generates classes in form of `.col-(size)-x-num` of width x/num.

@mixin make-extended-grid-columns($num-columns, $i: 1, $list: ".col-xs-#{$i}-#{$num-columns}, .col-sm-#{$i}-#{$num-columns}, .col-md-#{$i}-#{$num-columns}, .col-lg-#{$i}-#{$num-columns}") {
    @for $i from (1 + 1) through $num-columns {
        $list: "#{$list}, .col-xs-#{$i}-#{$num-columns}, .col-sm-#{$i}-#{$num-columns}, .col-md-#{$i}-#{$num-columns}, .col-lg-#{$i}-#{$num-columns}";
    }
    #{$list} {
        position: relative;
        min-height: 1px;
        padding-left:  ($grid-gutter-width / 2);
        padding-right: ($grid-gutter-width / 2);
    }
}


@mixin float-extended-grid-columns($class, $num-columns, $i: 1, $list: ".col-#{$class}-#{$i}-#{$num-columns}") {
    @for $i from (1 + 1) through $num-columns {
        $list: "#{$list}, .col-#{$class}-#{$i}-#{$num-columns}";
    }
    #{$list} {
        float: left;
    }
}


@mixin calc-extended-grid-column($index, $num-columns, $class, $type) {
    @if ($type == width) and ($index > 0) {
        .col-#{$class}-#{$index}-#{$num-columns} {
            width: percentage(($index / $num-columns));
        }
    }
    @if ($type == push) and ($index > 0) {
        .col-#{$class}-push-#{$index}-#{$num-columns} {
            left: percentage(($index / $num-columns));
        }
    }
    @if ($type == pull) and ($index > 0) {
        .col-#{$class}-pull-#{$index}-#{$num-columns} {
            right: percentage(($index / $num-columns));
        }
    }
    @if ($type == offset) and ($index > 0) {
        .col-#{$class}-offset-#{$index}-#{$num-columns} {
            margin-left: percentage(($index / $num-columns));
        }
    }
}

@mixin loop-extended-grid-columns($num-columns, $class, $type) {
    @for $i from 1 through $num-columns - 1 {
        @include calc-extended-grid-column($i, $num-columns, $class, $type);
    }
}

@mixin make-extended-grid($class, $num-columns) {
    @include float-extended-grid-columns($class, $num-columns);
    @include loop-extended-grid-columns($num-columns, $class, width);
    @include loop-extended-grid-columns($num-columns, $class, pull);
    @include loop-extended-grid-columns($num-columns, $class, push);
    @include loop-extended-grid-columns($num-columns, $class, offset);
}

E você pode simplesmente criar classes:

$possible-number-extended-grid-columns: 8, 10, 24;

@each $num-columns in $possible-number-extended-grid-columns {

  // Columns

  @include make-extended-grid-columns($num-columns);

  // Extra small grid

  @include make-extended-grid(xs, $num-columns);

  // Small grid

  @media (min-width: $screen-sm-min) {
    @include make-extended-grid(sm, $num-columns);
  }

  // Medium grid

  @media (min-width: $screen-md-min) {
    @include make-extended-grid(md, $num-columns);
  }

  // Large grid

  @media (min-width: $screen-lg-min) {
    @include make-extended-grid(lg, $num-columns);
  }

}

Espero que alguém ache útil


2

Se alguém usa o bootstrap-sass (v3), aqui está um código simples para 5 colunas usando misturas de bootstrap:

  .col-xs-5ths {
     @include make-xs-column(2.4);
  }

  @media (min-width: $screen-sm-min) {
     .col-sm-5ths {
        @include make-sm-column(2.4);
     }
  }

  @media (min-width: $screen-md-min) {
     .col-md-5ths {
        @include make-md-column(2.4);
     }
  }

  @media (min-width: $screen-lg-min) {
     .col-lg-5ths {
        @include make-lg-column(2.4);
     }
  }

Verifique se você incluiu:

@import "bootstrap/variables";
@import "bootstrap/mixins";

11
Obrigado, isso era o que eu estava procurando, eu fiz 1-5ths 2-5ths etc e até mesmo 3-10ths etc agora também, para ter mais flexibilidade, muito conveniente
morksinaanab

2

Para o Bootstrap 4.4 ou superior

Use as novas row-cols-nclasses.

  1. Adicione row-cols-5classe à sua .rowdiv. Não é necessário CSS personalizado.
  2. Consulte o documento 4.4 aqui para linhas-cols: https://getbootstrap.com/docs/4.4/layout/grid/#row-columns

Para versões do Bootstrap 4 anteriores ao Bootstrap 4.4

  1. Copie o CSS abaixo (CSS impressionante dos autores do Bootstrap) e adicione-o ao seu projeto

  2. Leia os documentos citados acima para usá-lo corretamente.

    .row-cols-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}@media (min-width:576px){.row-cols-sm-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-sm-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-sm-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-sm-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-sm-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-sm-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:768px){.row-cols-md-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-md-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-md-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-md-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-md-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-md-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:992px){.row-cols-lg-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-lg-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-lg-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-lg-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-lg-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-lg-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:1200px){.row-cols-xl-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-xl-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-xl-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-xl-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-xl-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-xl-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}


1

.col-xs-2-4 {
  position: relative;
  float: left;
  width: 20%;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
.col-sm-2-4 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .col-sm-2-4 {
    float: left;
    width: 20%;
  }
}
.col-md-2-4 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 992px) {
  .col-md-2-4 {
    float: left;
    width: 20%;
  }
}
.col-lg-2-4 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 1200px) {
  .col-lg-2-4 {
    float: left;
    width: 20%;
  }
}

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.