0

Creio que seja algo simples, mas como sou iniciante no Bootstrap ainda não descobri como fazer.

O que eu quero é que as colunas preencham a largura total da row, coloquei uma borda vermelha nos lados dela para facilitar o entendimento.

Sei que é o padding das colunas que da esse espaçamento, mas eu quero preencher a row sem remover o espaço entre as colunas.

JSFiddle

.box {
  height: 100px;
  margin-bottom: 20px;
  border: 1px solid rgba(0,0,0,0.2);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row" style="margin-top:40px;margin-bottom:40px;border-right: 1px solid red;border-left: 1px solid red;">
    <div class="col-xl-3 col-md-4 col-sm-6">
      <div class="box"></div>
     </div>
    <div class="col-xl-3 col-md-4 col-sm-6">
      <div class="box"></div>
    </div>
    <div class="col-xl-3 col-md-4 col-sm-6">
      <div class="box"></div>
    </div>
    <div class="col-xl-3 col-md-4 col-sm-6">
      <div class="box"></div>
    </div>
   </div>
  </div>

2
  • Gabriel qual é a necessidade dessa ocupação 100%? Se você tirar as bordas não da pra perceber se a col está ocupando 100% ou 90%.. não faz diferença. Se fizermos a coluna 'grudar' na row, toda vez que a quebra de media acontecer ela ficará estranha e desalinhada.
    – Bsalvo
    Commented 11/07/2017 às 12:06
  • Gabriel, um feedback seria interessante!
    – Bsalvo
    Commented 13/07/2017 às 11:56

3 Respostas 3

1

Acredito que não exista necessidade de fazer a coluna preencher a row 100%, mas como eu já comentei isso na pergunta, vamos seguir em frente.

O que foi feito:

  • HTML

Adicionei id para cada div de class='box' (A,B,C,D), para que possam sofrer de forma independente a manipulação do javascript.

  • CSS

Adicionada a classe first que reduz o margin-left do elemento em -15px.

Adicionada a classe last que reduz o margin-right do elemento em -15px.

Lógica por trás das classes first e last:

Quando o elemento é o primeiro de sua "linha" ele deve ficar encostado na borda esquerda de seu elemento pai (no caso a coluna).

Quando o elemento é o último de sua "linha" ele deve ficar encostado na borda direita de seu elemento pai (no caso a coluna).

Mas porque -15px? : 15px é o padding padrão da coluna definido pelo bootstrap. Então definimos que o elemento filho irá ter -15px de margin para cancelar a ação do padding.

  • JQuery

Utilizando o Jquery, criei a função encostar, que nada mais é do que a responsável por fazer as trocas de classes definidas anteriormente no CSS. (encostando o elemento na borda mais próxima).

Quando houver uma quebra de linha ou uma mudança de media, a função deve detectar e realocar as div's de forma correta.

Lógica por trás da realocação: Utilizando o offset do jquery, é possível pegar a posição exata em que o elemento se encontra na página, dessa forma podemos pegar a posição do último elemento id='D' e subtrair pela posição do primeiro elemento id='A'. Enquanto eles estiverem na mesma linha, a distância entre eles será de 853.5px. Dessa forma eu consigo detectar a hora exata em que ocorre a quebra de linha.

Quando ocorre a quebra de linha, o último elemento perde a classe last e recebe a classe first, porquê agora ele é o primeiro da linha de baixo.

E é claro que sobrou um elemento na linha de cima, e agora ele precisa receber a classe last.

Para que a realocação das div's funcione, estou usando os eventos .ready() e .resize(), que juntos são capazes de detectar quando a página foi totalmente carregada e toda vez que ela estiver sendo redimensionada.

  • Minha sinceridade

Não acredito que este código esteja da melhor forma possível, mas cumpre seu papel em relação a pergunta feita.

Infelizmente esse código funciona apenas quando estamos falando das 4 div's criadas (A,B,C,D).

Existe uma forma de fazer a realocação para um número indeterminado de divs?: Acredito que sim, mas não fui capaz de pensar dessa forma (talvez um pouco mais de persistência e eu chego la!).

A visualização deste código também está disponível aqui.

$(document).ready(encostar);
$(window).on('resize',encostar);

function encostar(){
 
  var vet = [];
  
  $('.box').each(function(){
    
    var offset = $(this).offset();
    
   // $(this).text(offset.left+'px');
    
    vet[$(this).attr('id')] = offset.left;
    
    var out = '';
    for (var i in vet) {
        out += i + ": " + vet[i] + "\n";
    }
        
    if(vet['D'] - vet['A'] < 853.5)
      {       

        $('#D').addClass('first');
        $('#D').removeClass('last');
        
        if($('#C').hasClass('first'))
          {
            
          }
        else
          {
            $('#C').addClass('last');
          }    
        
        if(vet['B'] === vet['D'])
          {
              $('#D').removeClass('first');
              $('#D').addClass('last');
              $('#B').removeClass('first');
              $('#B').addClass('last');
          }
        
        if(vet['A'] === vet['C']-15)
          {
            $('#C').addClass('first');
            $('#C').removeClass('last');
            
            if($(window).width() < 575)
            {
               $('#A').addClass('last');
               $('#C').addClass('last');
               $('#B').addClass('first');
               $('#B').addClass('last');
               $('#D').addClass('first');
               $('#D').addClass('last');
            }
            else
              {
               $('#A').removeClass('last');
               $('#C').removeClass('last');
               $('#B').removeClass('first');
               $('#D').removeClass('first');
              }
            
          }
        
      }
    else
      {   
   
        $('#D').removeClass('first');
        $('#D').addClass('last');
        $('#C').removeClass('last'); 
        $('#C').removeClass('first');  
        $('#B').removeClass('last'); 
      }
    
 
    
  });
 
}
.box {
  height: 100px;
  margin-bottom: 20px;
  border: 1px solid rgba(0,0,0,0.2);
  text-align: center;
}


.first{
  
    margin-left: -15px !important;
  
}


.last{
  
    margin-right: -15px !important;
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row" style="margin-top:40px;margin-bottom:40px;border-right: 1px solid red;border-left: 1px solid red;">
    <div class="col-xl-3 col-md-4 col-sm-6">
      <div class="box first" id='A'></div>
     </div>
    <div class="col-xl-3 col-md-4 col-sm-6">
      <div class="box" id='B'></div>
    </div>
    <div class="col-xl-3 col-md-4 col-sm-6">
      <div class="box" id='C'></div>
    </div>
    <div class="col-xl-3 col-md-4 col-sm-6">
      <div class="box last" id='D'></div>
    </div>
   </div>
  </div>

Não esqueça de redimensionar o navegador!

2
  • Desculpa a demora para dar um feedback. Obrigado pelo código, mas teria que ser uma solução dinâmica, sem limite de colunas. Commented 17/07/2017 às 16:01
  • Ok, é sempre bom esclarecer na pergunta também!
    – Bsalvo
    Commented 17/07/2017 às 16:03
0

O que veio à minha cabeça no momento é criar duas classes para suas colunas. Uma que ficará do lado esquerdo, com padding apenas na direita. E outra que ficará sempre na direita, com padding somente na esquerda. Com isso, elas ocupariam 100% do frame e continuariam separadas.

<div class="container">
<div class="row" style="margin-top:40px;margin-bottom:40px;border-right: 1px solid red;border-left: 1px solid red;">
  <div class="col-xl-3 col-md-4 col-sm-6 col-left">
    <div class="box"></div>
 </div>
<div class="col-xl-3 col-md-4 col-sm-6 col-right">
  <div class="box"></div>
</div>
<div class="col-xl-3 col-md-4 col-sm-6 col-left">
  <div class="box"></div>
</div>
<div class="col-xl-3 col-md-4 col-sm-6 col-right">
  <div class="box"></div>
</div>

    .box {
  height: 100px;
  margin-bottom: 20px;
  border: 1px solid rgba(0,0,0,0.2);
  padding: (0,0,0,0)
}

.col-left {
  padding-left: 0px;
 }

 .col-right {
  padding-right: 0px;
 }

Segue o JS Fiddle abaixo, em que fiz minhas edições: JS Fiddle

2
  • Pedro, isso não resolve o problema, as colunas do meio não possuem mais espaço entre elas.
    – Bsalvo
    Commented 11/07/2017 às 11:44
  • Sim, não resolve. Eu tinha entendido errado a pergunta! Commented 11/07/2017 às 19:58
0

As linhas vermelhas do seu snippet devem estar encostadas nas laterais? De acordo com a documentação de containers você pode trocar a classe container por container-fluid:

.box {
  height: 100px;
  margin-bottom: 20px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
  <div class="row" style="margin-top:40px;margin-bottom:40px;border-right: 1px solid red;border-left: 1px solid red;">
    <div class="col-xl-3 col-md-4 col-sm-6">
      <div class="box"></div>
    </div>
    <div class="col-xl-3 col-md-4 col-sm-6">
      <div class="box"></div>
    </div>
    <div class="col-xl-3 col-md-4 col-sm-6">
      <div class="box"></div>
    </div>
    <div class="col-xl-3 col-md-4 col-sm-6">
      <div class="box"></div>
    </div>
  </div>
</div>

1
  • Renan não são as linhas vermelhas que devem encostar, são as div's box, que devem encostar na linha vermelha.
    – Bsalvo
    Commented 11/07/2017 às 16:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .