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，以便规则出来。

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

注意：我保留了在我的问题/小提琴中影响这些页面元素的整个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>

但你应该知道这只是一个快速修复。一个黑客。如果我在你的位置，我会寻找你的代码为每个角色嵌套一行的原因。