在 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，以防万一它是导致问题的原因。
最佳答案
.row {
margin-right: -15px;
margin-left: -15px;
}
此 CSS 是导致您出现问题的原因。我没有确切地看到如何，但你的 js 代码为每个键入的字符嵌套一行。并使用 bootstrap.css 中的此 css每个嵌套行都变得越来越大。图像也会放大。
你可以做的是，用 <style> 覆盖 html 文件中的这个 css标签。像这样:
<style>
.row{
margin-right:0px;
margin-left:0px;
}
</style>
但您应该知道这只是一个快速解决方案。一个黑客。如果我处于您的位置，我会查找您的代码为每个字符嵌套一行的原因。
关于javascript - 我在搜索栏中输入的内容越多，Bootstrap 列就会越大，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38523696/