防止在调整动画系统大小时出现换行

Question

Hi在这个系统中，每个div都设置为悬停时变宽，而其他div则变薄。在这个系统中，黑色div在下面的行中移动。我想找到一个系统来防止换行，并在同一行显示所有4个div，同时调整大小以保持100%的页面宽度。有人能帮我吗？

附加信息：它应该与引导程序列一起工作

JS小提琴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%来解决你的问题。

看看这个。