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:
Adicionei id
para cada div
de class='box'
(A,B,C,D), para que possam sofrer de forma independente a manipulação do javascript.
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
.
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.
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!