防止调整大小动画系统上的行分号

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

引导程序类col-sm-3本身定义了默认宽度。因此它会干扰你的自定义宽度。 你可以在任何地方减少1%来解决你的问题。

Check This Out.