Бутстрап-колонны увеличить больше Я печатаю в строке поиска

Question

При вводе текста в строку поиска input мой Bootstrap div .col-xs-4 увеличивает, вырывая из него контейнер. Что странно, инструменты разработчика, похоже, не показывают каких-либо изменений в коде, которые повлияют на это.

Чтобы воспроизвести эту проблему, попробуйте ввести полное имя одного из изображений в этой галерее JSFiddle, т. Е. «Satcom 2016», и посмотреть, как из его контейнера вылетает div. Очистка ввода затем показывает, что каждый div расширился, а не только видимые.

JSFiddle

https://jsfiddle.net/vadrfgvv/

JQuery

function rowBreak(input) { 
    $('.col-flex').hide(); 
    if (input) { 
    $('.row-flex').replaceWith(function() { 
     return $(this).html(); 
    }); 
    $('.col-flex').wrapAll('<div class="row">'); 
    } 
    $('.col-visible').each(function(i, e) { 
    if (((i + 1) % 3 == 0) && ($(this).siblings().length != 2)) { 
     var x = $('.col-visible:gt(' + i + ')'); 
     $('<div class="row">').append(x).insertAfter(this.closest('div.row')); 
    } 
    }); 
    $('.col-visible').show(); 
} 

rowBreak(0); 

$('#search').on('keyup', function() { 
    $('.col-flex').removeClass('col-visible').hide(); 
    var s = $(this).val().toLowerCase(); 
    $('.col-flex').filter(function() { 
    return $(this).find('h4').text().toLowerCase().indexOf(s) > -1; 
    }).show().addClass('col-visible'); 
    rowBreak(s); 
}); 

$('#results').on('click', '.panel-search', function() { 
    $(this).toggleClass('panel-default').toggleClass('panel-success'); 
    $(this).find('.panel-body').toggleClass('bg-green'); 

    var image = $(this).find('img'); 
    var imageID = image.attr('id'); 
    // alert(image.width()); 

    if ($(this).hasClass('panel-success')) { 
    image.clone().appendTo('.panel-include').removeClass('img-thumbnail').css('margin-bottom', '20px').attr('id', 'x' + imageID).wrap('<p></p>'); 
    } else { 
    $('.panel-include').find(('#x' + imageID)).closest('p').remove(); 
    } 

    if ($('.panel-include > p').length == 0) { 
    $('.panel-include').find('em').show(); 
    } else { 
    $('.panel-include').find('em').hide(); 
    } 
}); 

$('.btn-save').on('click', function(e) { 
    e.preventDefault(); 
    var logos = ''; 
    $('.panel-include').find('p').each(function() { 
    imageID = $(this).find('img').attr('id'); 
    logos += imageID; 
    }); 
    if (logos) { 
    logos = logos.substr(1); 
    } 
    $("input[name=ids]").val(logos); 
    $(this).closest('form').submit(); 
}); 

HTML

<div class="container-fluid"> 
    <div class="form-group"> 
    <div class="input-group"> 
     <span class="input-group-addon"><i class="fa fa-search"></i></span> 
     <input class="form-control" id="search" type="text" placeholder="Search..."> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-xs-3"> 
     <div class="panel panel-primary"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
      Your Chosen Content 
      </h4> 
     </div> 
     <div class="panel-body panel-include"> 
      <em class="text-muted">Click on some images to add them here.</em> 
     </div> 
     </div> 
     <form action="#" method="get"> 
     <input type="hidden" name="ids" value=""> 
     <p class="text-right"> 
      <button class="btn btn-primary btn-save" type="submit"> 
      <i class="fa fa-save"></i> Save 
      </button> 
     </p> 
     </form> 
    </div> 
    <div class="col-xs-9"> 
     <div id="results"> 
     <div class="row row-flex"> 
      <div class="col-xs-4 col-flex col-visible"> 
      <div class="panel panel-search panel-default"> 
       <div class="panel-heading"> 
       <h4 class="panel-title"> 
        AEClim 
       </h4> 
       </div> 
       <div class="panel-body"> 
       <img class="img-responsive img-thumbnail img-gallery" src="http://placehold.it/160x100/cccccc/9a9a9a/&text=AEClim" id="1"> 
       </div> 
      </div> 
      </div> 
      <div class="col-xs-4 col-flex col-visible"> 
      <div class="panel panel-search panel-default"> 
       <div class="panel-heading"> 
       <h4 class="panel-title"> 
        AEMET 
       </h4> 
       </div> 
       <div class="panel-body"> 
       <img class="img-responsive img-thumbnail img-gallery" src="http://placehold.it/160x100/cccccc/9a9a9a/&text=AEMET" id="2"> 
       </div> 
      </div> 
      </div> 
      <div class="col-xs-4 col-flex col-visible"> 
      <div class="panel panel-search panel-default"> 
       <div class="panel-heading"> 
       <h4 class="panel-title"> 
        AME 
       </h4> 
       </div> 
       <div class="panel-body"> 
       <img class="img-responsive img-thumbnail img-gallery" src="http://placehold.it/160x100/cccccc/9a9a9a/&text=AME" id="3"> 
       </div> 
      </div> 
      </div> 
      <div class="col-xs-4 col-flex col-visible"> 
      <div class="panel panel-search panel-default"> 
       <div class="panel-heading"> 
       <h4 class="panel-title"> 
        APMG 
       </h4> 
       </div> 
       <div class="panel-body"> 
       <img class="img-responsive img-thumbnail img-gallery" src="http://placehold.it/160x100/cccccc/9a9a9a/&text=APMG" id="4"> 
       </div> 
      </div> 
      </div> 
      <div class="col-xs-4 col-flex col-visible"> 
      <div class="panel panel-search panel-default"> 
       <div class="panel-heading"> 
       <h4 class="panel-title"> 
        ATC Network 
       </h4> 
       </div> 
       <div class="panel-body"> 
       <img class="img-responsive img-thumbnail img-gallery" src="http://placehold.it/160x100/cccccc/9a9a9a/&text=ATC+Network" id="5"> 
       </div> 
      </div> 
      </div> 
      <div class="col-xs-4 col-flex col-visible"> 
      <div class="panel panel-search panel-default"> 
       <div class="panel-heading"> 
       <h4 class="panel-title"> 
        Meteomet 
       </h4> 
       </div> 
       <div class="panel-body"> 
       <img class="img-responsive img-thumbnail img-gallery" src="http://placehold.it/160x100/cccccc/9a9a9a/&text=Meteomet" id="6"> 
       </div> 
      </div> 
      </div> 
      <div class="col-xs-4 col-flex col-visible"> 
      <div class="panel panel-search panel-default"> 
       <div class="panel-heading"> 
       <h4 class="panel-title"> 
        MMC 2016 
       </h4> 
       </div> 
       <div class="panel-body"> 
       <img class="img-responsive img-thumbnail img-gallery" src="http://placehold.it/160x100/cccccc/9a9a9a/&text=MMC+2016" id="7"> 
       </div> 
      </div> 
      </div> 
      <div class="col-xs-4 col-flex col-visible"> 
      <div class="panel panel-search panel-default"> 
       <div class="panel-heading"> 
       <h4 class="panel-title"> 
        Satcom 2016 
       </h4> 
       </div> 
       <div class="panel-body"> 
       <img class="img-responsive img-thumbnail img-gallery" src="http://placehold.it/160x100/cccccc/9a9a9a/&text=Satcom+2016" id="8"> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Первоначально я думал, что это был класс .img-responsive, который вызывал проблемы (возможно, изображение увеличивалось, когда было скрыто div?), Но похоже, что изображение фактически не увеличивается с div, так что правила, которые выходят.

Я не уверен, где еще можно начать отладку.

Примечание: Я сохранил весь Javascript, который влияет на эти элементы страницы в моем вопросе/Fiddle, в случае, если это то, что вызывает проблему.

Answer 1

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

Этот CSS является причиной вашей проблемы. я не видел точно, как, но ваш js-код вложен ряд для каждого символа. и с этим css в bootstrap.css каждая вложенная строка становится все больше и больше. изображения тоже расширяются.

что вы можете сделать, перезапишите этот css в html-файле с тегом <style>. что-то вроде:

<style> 
    .row{ 
     margin-right:0px; 
     margin-left:0px; 
    } 
</style> 

но вы должны знать, что это только быстрое решение. взломать. если бы я был на вашем месте, я бы искал причину, по которой ваш код вложен ряд для каждого символа.