Предотвращение разрыва строки при изменении размера анимационной системы

Question

Привет, в этой системе каждый div установлен для того, чтобы стать более широким при наведении, в то время как другие становятся более слабыми. С этой системой черный div перемещается в строке ниже. Я хотел бы найти систему для предотвращения разрыва строки и показать все 4 div в одной строке при изменении размера, сохраняя 100% ширины страницы. Может кто-нибудь мне помочь?

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ: Она должна быть работа с бутстраповской coloumn

JS FIDDLE https://jsfiddle.net/z3bujoww/7/

HTML:

<div class="col-sm-3" id="red"> 
</div> 
<div class="col-sm-3" id="blue"> 
</div> 
<div class="col-sm-3" id="green"> 
</div> 
<div class="col-sm-3" id="black"> 
</div> 

CSS:

#red{background-color: red;height:20px;} 
#blue{background-color: blue;height:20px;} 
#green{background-color: green;height:20px;} 
#black{background-color: black;height:20px;} 

Jquery:

$('#red').hover(function(){ 

$('#red').animate({ 
    width:'28%' 
},1000); 
$('#blue').animate({ 
    width:'24%' 
},1000); 
$('#green').animate({ 
    width:'24%' 
},1000); 
$('#black').animate({ 
    width:'24%' 
},1000);}, function() { 

$('#red').animate({ 
    width:'25%'},0); 
$('#blue').animate({ 
    width:'25%'},0); 
$('#green').animate({ 
    width:'25%'},0); 
$('#black').animate({ 
    width:'25%'},0); }); 

$('#blue').hover(function(){ 

$('#red').animate({ 
    width:'24%' 
},1000); 
$('#blue').animate({ 
    width:'28%' 
},1000); 
$('#green').animate({ 
    width:'24%' 
},1000); 
$('#black').animate({ 
    width:'24%' 
},1000);}, function() { 

$('#red').animate({ 
    width:'25%'},0); 
$('#blue').animate({ 
    width:'25%'},0); 
$('#green').animate({ 
    width:'25%'},0); 
$('#black').animate({ 
    width:'25%'},0); }); 

$('#green').hover(function(){ 

$('#red').animate({ 
    width:'24%' 
},1000); 
$('#blue').animate({ 
    width:'24%' 
},1000); 
$('#green').animate({ 
    width:'28%' 
},1000); 
$('#black').animate({ 
    width:'24%' 
},1000);}, function() { 

$('#red').animate({ 
    width:'25%'},0); 
$('#blue').animate({ 
    width:'25%'},0); 
$('#green').animate({ 
    width:'25%'},0); 
$('#black').animate({ 
    width:'25%'},0); }); 

$('#black').hover(function(){ 

$('#red').animate({ 
    width:'24%' 
},1000); 
$('#blue').animate({ 
    width:'24%' 
},1000); 
$('#green').animate({ 
    width:'24%' 
},1000); 
$('#black').animate({ 
    width:'28%' 
},1000);}, function() { 

$('#red').animate({ 
    width:'25%'},0); 
$('#blue').animate({ 
    width:'25%'},0); 
$('#green').animate({ 
    width:'25%'},0); 
$('#black').animate({ 
    width:'25%'},0); }); 

Answer 1

Bootstrap class col-sm-3 сам определяет ширину по умолчанию. Таким образом, это помешает вашей пользовательской ширине. Вы можете решить вашу проблему, уменьшив на 1% всюду.

Check This Out.