防止調整大小動畫系統上的行分號

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.