0
當輸入到input搜索欄時，我的引導程序將放大，突破它的容器。奇怪的是，開發者工具似乎沒有顯示任何會影響到這一點的代碼變化。Bootstrap列放大我在搜索欄中輸入的內容越多
複製此問題，請嘗試在此的jsfiddle畫廊鍵入圖像之一的全名，即「衛通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在我的問題/提琴中的全部情況，以防萬一它引起問題。
在每個關鍵事件中，你正在將內容封裝到'.row'中？這似乎不是一個好主意。 – Dygestor
如果有輸入，我首先刪除'.row'（使用'.replaceWith（）'），然後重新將它添加到正確的內容周圍，我想？ – mpdc
JS很明顯是造成這個問題。你想達到什麼目的？ – Dygestor