我有以下代码:

的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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</a>
            </p>
        </div>
        <div class="col-md-4">
             <h2>Visit Requests &amp; 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 &raquo;</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 &raquo;</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/

10-05 20:33
查看更多