Codrops - Wählen Inspiration und Bootstrap

Question

Ich benutze Bootstrap und Codrops -Klicken Sie auf diesen Link für Demo, ich habe neun Divs mit Auswahl Optionen, wenn ich den Mauszeiger über die Spalte-1 oder Spalte-2 und so weiter es öffnet die Wählen Sie Optionen wie in der Demo,

Mein Problem ist, Wenn Optionen öffnen, sollte es nicht in der zweiten Zeile überlagern, so gab ich Padding unten auf den Hover für alle Spalten, so dass ich Platz für die Anzeige der Optionen des Select-Elements, Es funktioniert gut, aber jedes Mal, wenn es öffnet, bricht die gesamte Struktur und ruft das letzte Div in der zweiten Zeile, ich habe versucht, Anzeige: Tabelle; für Zeilen und Anzeige: Tabellenzelle; Dies sind die gesamte Markup für Spalten nichts

arbeitet

<section> 
    <div class="row"> 
     <div class="col-lg-4"> 
      <select class="column-1 cs-select cs-skin-border"> 
       <option disabled selected value=""> 
        Glat Request 
       </option> 
       <option value="email"> 
        New ID 
       </option> 
       <option value="twitter"> 
        Registration 
       </option> 
       <option value="linkedin"> 
        Manage 
       </option> 
      </select> 
     </div> 
     <div class="col-lg-4"> 
      <select class="column-2 cs-select cs-skin-border"> 
       <option disabled selected value=""> 
        URL Redirect 
       </option> 
       <option value="email"> 
        New ID 
       </option> 
       <option value="twitter"> 
        Registration 
       </option> 
       <option value="linkedin"> 
        Manage 
       </option> 
      </select> 
     </div> 
     <div class="col-lg-4"> 
      <select class="column-3 cs-select cs-skin-border"> 
       <option disabled selected value=""> 
        Campaign Registration 
       </option> 
       <option value="email"> 
        New ID 
       </option> 
       <option value="twitter"> 
        Registration 
       </option> 
       <option value="linkedin"> 
        Manage 
       </option> 
      </select> 
     </div> 
     <div class="col-lg-4"> 
      <select class="column-4 cs-select cs-skin-border"> 
       <option disabled selected value=""> 
        Users 
       </option> 
       <option value="email"> 
        New ID 
       </option> 
       <option value="twitter"> 
        Registration 
       </option> 
       <option value="linkedin"> 
        Manage 
       </option> 
      </select> 
     </div> 
     <div class="col-lg-4"> 
      <select class="column-5 cs-select cs-skin-border"> 
       <option disabled selected value=""> 
        Pixel Request 
       </option> 
       <option value="email"> 
        New ID 
       </option> 
       <option value="twitter"> 
        Registration 
       </option> 
       <option value="linkedin"> 
        Manage 
       </option> 
      </select> 
     </div> 
     <div class="col-lg-4"> 
      <select class="column-6 cs-select cs-skin-border"> 
       <option disabled selected value=""> 
        CRO Request 
       </option> 
       <option value="email"> 
        New ID 
       </option> 
       <option value="twitter"> 
        Registration 
       </option> 
       <option value="linkedin"> 
        Manage 
       </option> 
      </select> 
     </div> 
     <div class="col-lg-4"> 
      <select class="column-7 cs-select cs-skin-border"> 
       <option disabled selected value=""> 
        Your Request 
       </option> 
       <option value="email"> 
        New ID 
       </option> 
       <option value="twitter"> 
        Registration 
       </option> 
       <option value="linkedin"> 
        Manage 
       </option> 
      </select> 
     </div> 
     <div class="col-lg-4"> 
      <select class="column-8 cs-select cs-skin-border"> 
       <option disabled selected value=""> 
        Some Request 
       </option> 
       <option value="email"> 
        New ID 
       </option> 
       <option value="twitter"> 
        Registration 
       </option> 
       <option value="linkedin"> 
        Manage 
       </option> 
      </select> 
     </div> 
     <div class="col-lg-4"> 
      <select class="column-9 cs-select cs-skin-border"> 
       <option disabled selected value=""> 
        Campaign 
       </option> 
       <option value="email"> 
        New ID 
       </option> 
       <option value="twitter"> 
        Registration 
       </option> 
       <option value="linkedin"> 
        Manage 
       </option> 
      </select> 
     </div> 
    </div> 
</section> 

JS

(function() { 
    [].slice.call(document.querySelectorAll('select.cs-select')).forEach(
     function(el) { 
      new SelectFx(el); 
     }); 
})(); 

$(document).ready(function() { 
$(".column-1").hover(function() { 

    //For opening the select element 

$('div.column-1').addClass('cs-active'); 

     if ($(this).hasClass('cs-active')) { 

      //Padding bottom for adding space for the opened element 

      $('div.column-1').css('padding-bottom', '80px'); 
     } 


}, function() { 

    //On hover out actions 

    $('div.column-1').removeClass('cs-active'); 
    $('div.column-1').css('padding-bottom', '0px'); 
}); 
$(".column-2").hover(function() { 
    $('div.column-2').addClass('cs-active'); 
    if ($(this).hasClass('cs-active')) { 
     $('div.column-2').css('padding-bottom', '80px'); 
    }; 

}, function() { 
    $('div.column-2').removeClass('cs-active'); 
    $('div.column-2').css('padding-bottom', '0px'); 
}); 
$(".column-3").hover(function() { 
    $('div.column-3').addClass('cs-active'); 
    if ($(this).hasClass('cs-active')) { 
     $('div.column-3').css('padding-bottom', '80px'); 
    } 

}, function() { 
    $('div.column-3').removeClass('cs-active'); 
    $(this).css('padding-bottom', '0px'); 
}); 
$(".column-4").hover(function() { 
    $('div.column-4').addClass('cs-active'); 
    if ($(this).hasClass('cs-active')) { 
     $('div.column-4').css('padding-bottom', '80px'); 
    } 

}, function() { 
    $('div.column-4').removeClass('cs-active'); 
    $('div.column-4').css('padding-bottom', '0px'); 
}); 
$(".column-5").hover(function() { 
    $('div.column-5').addClass('cs-active'); 
    if ($(this).hasClass('cs-active')) { 
     $('div.column-5').css('padding-bottom', '80px'); 
    } 

}, function() { 
    $('div.column-5').removeClass('cs-active'); 
    $('div.column-5').css('padding-bottom', '0px'); 
}); 
$(".column-6").hover(function() { 
    $('div.column-6').addClass('cs-active'); 
    if ($(this).hasClass('cs-active')) { 
     $('div.column-6').css('padding-bottom', '80px'); 
    } 

}, function() { 
    $('div.column-6').removeClass('cs-active'); 
    $('div.column-6').css('padding-bottom', '0px'); 
}); 
$(".column-7").hover(function() { 
    $('div.column-7').addClass('cs-active'); 
    if ($(this).hasClass('cs-active')) { 
     $('div.column-7').css('padding-bottom', '80px'); 
    } 

}, function() { 
    $('div.column-7').removeClass('cs-active'); 
    $('div.column-7').css('padding-bottom', '0px'); 
}); 
$(".column-8").hover(function() { 
    $('div.column-8').addClass('cs-active'); 
    if ($(this).hasClass('cs-active')) { 
     $('div.column-8').css('padding-bottom', '80px'); 
    } 

}, function() { 
    $('div.column-8').removeClass('cs-active'); 
    $('div.column-8').css('padding-bottom', '0px'); 
}); 
$(".column-9").hover(function() { 
    $('div.column-9').addClass('cs-active'); 
    if ($(this).hasClass('cs-active')) { 
     $('div.column-9').css('padding-bottom', '80px'); 
    } 

}, function() { 
    $('div.column-9').removeClass('cs-active'); 
    $('div.column-9').css('padding-bottom', '0px'); 
}); 

});

CSS

.col-lg-4 { 
display: inline-block; 
margin-bottom: 3%; 
} 

.row { 
    margin-left: 15px; 
    margin-right: 15px; 
} 

div.cs-skin-border { 
    font-size: 16px; 
    font-weight: 300; 
} 

Answer 1

Ich löste es von mir durch die alle divs zählen auf ‚Mouseover‘ durch drei Schneiden, wenn der Bildschirm groß ist und es als zwei Schneiden, wenn der Bildschirm kleiner ist und so weiter und verpackt mit einem anderen 'div' wo es perfekt für mich funktioniert und 'mouseout' habe ich ausgepackt und lasse die divs so wie es ist. Hier

ist der Code

$(document).ready(function() { 
loadMenus(); 
w = $(window).width(); 
}); 
$(window).resize(function() { 
    if (w != $(window).width()) { 
     console.log('window resized..'); 
     this.location.reload(false); 
     w = $(window).width(); 
     delete w; 
    } 
}); 

function loadMenus() { 
    var divs = $("div > div.col-lg-4:visible"); 
    $(".toolWrapper .col-lg-4").on('mouseover', function() { 
     var screen = parseInt(parseInt($(".col-lg-4").css('width'))/
      $(window).innerWidth() * 100); 
     var csOptions = $('div.cs-options').height(); 
     var countContent; 
     if (screen >= 90) { 
      countContent = 1; 
     } else if (screen >= 40) { 
      countContent = 2; 
     } else if (screen >= 30) { 
      countContent = 3; 
     } 
     for (var i = 0; i < divs.length; i += countContent) { 
      divs.slice(i, i + countContent).wrapAll(
       "<div class='divWraper' style='width:100%;float:left;'></div>" 
      ); 
     } 
     $(this).find('div.cs-select').addClass('cs-active'); 

    }); 
    $(".toolWrapper .col-lg-4").on('mouseout', function() { 
     $(".col-lg-4").unwrap(); 
     $(this).find('div.cs-select').removeClass('cs-active'); 

}