jquery同位素与响应式twitter bootstrap

Question

我正在使用Bootstrap 3，并且无法获得具有相同宽度和高度的视频库，但视频会对工作做出响应。

CSS：

video{
  width:100%;
  height:auto;
}

我正在使用Bootstrap 3来使其响应，例如。大屏幕3个视频连续显示，平板电脑上显示2个视频。一切都很好，直到我应用同位素，然后我的视频/图像变得不稳定，它们出现在不同的大小。

我似乎无法弄清楚发生了什么。我在this上尝试了这个建议，似乎也没有用。任何帮助表示赞赏。谢谢。

HTML：

<div class="content container">

        <div class="row">
            <div class="col-md-12 col-sm-12">
                <div id="isotope">
                    <div id="topbar">   
                        <div id="filters">
                            <p>Sort by:</p>

                            <div class="section" id="utensils">
                                <ul>
                                    <li>
                                        <input type="checkbox" name="hands" value=".hands" id="hands"></input><label for="hands">Hands</label>
                                    </li>
                                    <li>
                                        <input type="checkbox" name="fork" value=".fork" id="fork"></input><label for="fork">Fork</label>
                                    </li>
                                    <li>
                                        <input type="checkbox" name="spoon" value=".spoon" id="spoon"></input><label for="spoon">Spoon</label>
                                    </li>
                                    <li>
                                        <input type="checkbox" name="knife" value=".knife" id="knife"></input><label for="knife">Knife</label>
                                    </li>
                                    <li>
                                        <input type="checkbox" name="chopsticks" value=".chopsticks" id="chopsticks"></input><label for="chopsticks">Chopsticks</label>
                                    </li>
                                </ul>
                            </div>


                        </div> <!-- end #filters -->
                    </div> <!-- end #topbar -->
                </div> <!-- end #kitchennav -->
            </div>
        </div>

        <div id="act2_content">
            <div class="col-md-1 col-sm-1 right-col"> 
            </div>

            <div class="col-md-10 col-sm-10">
                <div class="row">
                    <div class="col-sm-6 col-md-4">
                        <div class="item chopsticks hamburger shake">
                            <video width="300" height="auto" id="myvideo4"><source src="videos/b_cs.mp4" type="video/mp4"></video>
                         </div>
                    </div>

                    <div class="col-sm-6 col-md-4">
                        <div class="item hands cupcake shake">
                            <video width="300" height="auto" id="myvideo5"><source src="videos/cc_h.mp4" type="video/mp4"></video>
                        </div>
                    </div>

                    <div class="col-sm-6 col-md-4">
                        <div class="item spoon cupcake shake">
                            <video width="300" height="auto" id="myvideo7"><source src="videos/cc_s.mp4" type="video/mp4"></video>
                        </div>
                    </div>

                    <div class="col-sm-6 col-md-4">  
                        <div class="item chopsticks cupcake shake">
                            <video width="300" height="auto" id="myvideo8"><source src="videos/cc_cs.mp4" type="video/mp4"></video>
                        </div>
                    </div>

                    <div class="col-sm-6 col-md-4">
                        <div class="item hands icecream shake">
                            <video width="300" height="auto" id="myvideo9"><source src="videos/ic_h.mp4" type="video/mp4"></video>
                        </div>
                    </div>


                </div>
            </div>

            <div class="col-md-1 col-sm-1 right-col"> 
            </div>

        </div>
    </div>

JQuery的：

$(function(){

  var $container = $('#act2_content'),
      $checkboxes = $('#filters input');

    $container.imagesLoaded(function(){
        $container.isotope({
            itemSelector: '.item'
        });
    });

  $checkboxes.change(function(){
    var filters = [];
    // get checked checkboxes values
    $checkboxes.filter(':checked').each(function(){
      filters.push( this.value );
    });
    // ['.red', '.blue'] -> '.red, .blue'
    filters = filters.join('');
    $container.isotope({ filter: filters });
  });

  $('#shuffle').click(function(){
    $container.isotope('shuffle');
  });

  var $items = $container.children();

  $items.click(function(){
    var idx = $(this).index();

    var $isoItem = $(this),
        $filteredAtoms = $container.data('isotope').$filteredAtoms,
        isoIndex = $filteredAtoms.index( this ),
        nextIndex = ( isoIndex + 1 ) % $filteredAtoms.length;

    $items.filter('.next').removeClass('next');
    $filteredAtoms.eq( nextIndex ).addClass('next');

  });

});