I think there is no need to make the column fill the row 100%, but as I already mentioned this in the question, let's move on.
What was done:
I've added id to each div of class='box' (A, B, C, D) so that they can independently undergo javascript manipulation.
Added class first which reduces the margin-left of the element to -15px.
Added class last which reduces the margin-right of the element to -15px.
Logic behind classes first and last :
When the element is the first of your "line" it should be leaning against the left edge of your parent element (in this case the column).
When the element is the last of your "line" it should be leaning against the right edge of your parent element (in this case the column).
But why -15px? : 15px is the default% of the column defined by the bootstrap. So we have defined that the child element will have padding of -15px to cancel the action of margin .
Using Jquery, I created the touch function, which is nothing more than the one responsible for doing the class changes defined earlier in CSS . (by touching the element on the nearest border).
When there is a line break or a change of media , the function should detect and relocate the div's correctly.
Logic behind relocation: Using the offset of jquery, you can get the position exactly where the element is on the page, so we can get the position of the last element padding and subtract by the position of the first element id='D' . As long as they are on the same line, the distance between them will be id='A' . This way I can detect the exact time the line break occurs.
When the line break occurs, the last element loses the class 853.5px and receives the class last , because now it is the first of the bottom line.
And of course there's one element left in the top row, and now it needs to get the first class.
In order for the div's relocation to work, I'm using the events .ready () and #, which together are able to detect when the page has been fully loaded and every time it is being resized.
I do not believe this code is in the best way possible, but it fulfills its role in relation to the question asked.
Unfortunately this code works only when we are talking about the 4 created divs (A, B, C, D).
Is there a way to do reallocation to an indeterminate number of divs?: I think so, but I was not able to think that way (maybe a little more persistence and I'll get it!) .
Viewing this code is also available here .
$(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><linkhref="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>
Do not forget to resize your browser!
