javascript - 我在搜索栏中输入的内容越多，Bootstrap 列就会越大

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 放大，因此排除了这一点。

我不确定从哪里开始调试。

注意:我在我的问题/Fiddle 中保留了影响这些页面元素的全部 Javascript，以防万一它是导致问题的原因。

Answer 1

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

此 CSS 是导致您出现问题的原因。我没有确切地看到如何，但你的 js 代码为每个键入的字符嵌套一行。并使用 bootstrap.css 中的此 css每个嵌套行都变得越来越大。图像也会放大。

你可以做的是，用 <style> 覆盖 html 文件中的这个 css标签。像这样:

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

但您应该知道这只是一个快速解决方案。一个黑客。如果我处于您的位置，我会查找您的代码为每个字符嵌套一行的原因。