Question

我有以下代码：

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，我想你会明白我的意思。

Answer 1

我认为可以删除新行的声明。

删除第二个<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/

Answer 2

为什么要使用色谱柱？将您的结果放在一个无序列表中，并将所有列表项元素浮动，然后用宽度来修复它们的宽度。

<div class="row">
    <ul>
        <li><div>fancy_result1</div></li>
        <li><div>fancy_result2</div></li>
        <li><div>fancy_result3</div></li>
        <li><div>fancy_result4</div></li>
        <li><div>fancy_result5</div></li>
    </ul>
</div>

您拥有的是结果列表。可能不应该人为地创建行。

脏样本：http://jsfiddle.net/55vZx

Answer 3

仅在bootstrap中，就没有办法让col div以这种方式运行。将row视为表格行（tr）。该行内的任何内容都将保留在该行中，无论其前面的行数是多少。要实现您的目标，您可以：

A）使用一些JS在每一行中重新分配你的col-md-4 div（取你想要显示的那些并将前3个复制到第一行，然后将3个复制到第二行等等）。。）

或

B）远离bootstrap并编写一些自定义CSS以消除对行的需要（就像一系列div全部浮动左侧）

更新：事实上：如果你只是删除包含row div ..它似乎以正确的方式表现。注意引导程序没有写入以便在没有行的情况下始终正常工作，因此您可能需要在边缘情况下执行一些额外的样式。请参阅http://jsfiddle.net/9bHVf/13/

如何在Bootstrap网格中隐藏/显示元素并更新位置

3 个答案: