Question

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

附加信息：应该使用bootstrap 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类col-sm-3本身定义了默认宽度。因此它会干扰您的自定义宽度。您可以通过在任何地方减少1%来解决您的问题。

Check This Out.

在调整动画系统大小时防止行中断

1 个答案: