我有以下代码:
的HTML
<div class="container">
<div class="form-group has-success has-feedback" style="width:250px">
<label class="control-label sr-only" for="SearchTB">Hidden Label</label>
<input type="text" ID="SearchTB" placeholder="Search" onkeyup="FilterTextBox();" autofocus="true" class="form-control" /> <span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
<div class="row">
<div class="col-md-4">
<h2>Project LRE</h2>
<p>Latest Revised Estimated for Projects, used by Finance.</p>
<p><a class="btn btn-default" href="/ProjectLRE" role="button">View Site »</a>
</p>
</div>
<div class="col-md-4">
<h2>TERMUS</h2>
<p>TERMUS online appraisal system.</p>
<p><a class="btn btn-default" href="/TERMUS" role="button">View Site »</a>
</p>
</div>
<div class="col-md-4">
<h2>Call Logs</h2>
<p>Online system for reporting calls to comply with FOCI rules.</p>
<p><a class="btn btn-default" href="/CallLogs" role="button">View Site »</a>
</p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h2>Call Logs (Mobile)</h2>
<p>Mobile optimized site for reporting calls to comply with FOCI rules.</p>
<p><a class="btn btn-default" href="/CallLogsMobile" role="button">View Site »</a>
</p>
</div>
<div class="col-md-4">
<h2>Visit Requests & Contact Reports</h2>
<p>Managed visit requests and contact reports to comply with FOCI rules.</p>
<p><a class="btn btn-default" href="/VisitRequests" role="button">View Site »</a>
</p>
</div>
<div class="col-md-4">
<h2>Quick Reports Scheduler</h2>
<p>Schedule Quick Reports from IFS to be delivered to automatically delivered to you on a schedule.</p>
<p><a class="btn btn-default" href="/QuickReports" role="button">View Site »</a>
</p>
</div>
</div>
</div>
的JavaScript
function FilterResults(filtertext) {
$(".col-md-4").each(function (index, element) {
if ($(element).text().toUpperCase().indexOf(filtertext.toUpperCase()) > -1) {
$(element).show();
} else {
$(element).hide();
}
});
}
function FilterTextBox() {
FilterResults($("#SearchTB").val());
}
目标是此文本框将基于输入文本显示/隐藏元素。这行得通,但是由于我使用Bootstrap定义行的方式,元素仍然与定义它们的行绑定在一起,而不是动态重新排序。我仍在学习Bootstrap,不知道如何获取它们,以便搜索结果出现在第一个可用的“插槽”中。我该怎么办?
这是the fiddle。搜索
call
,我想您会明白我的意思的。 最佳答案
我认为可以删除新行的声明。
删除第二个<div class="row">
,以便网格行中包含3个以上的元素。
新结构将如下所示:
<div class="row">
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
</div>
更新的小提琴:http://jsfiddle.net/WekyP/