如何隐藏/显示元素在引导网格和有位置更新

How to hide/show elements in Bootstrap grid and have the position update

本文关键字：网格 更新 位置 元素 何隐藏 隐藏 显示      更新时间：2023-09-26

我有以下代码:

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，不知道如何得到它们，以便搜索结果出现在第一个可用的"槽"。我该怎么做呢?

小提琴在这里。搜索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/

为什么使用列?把你的结果放在一个无序的列表和浮动所有的列表元素，并固定他们的宽度w/css.

<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

单独在引导中，没有办法让coldiv以这种方式表现。将row看作表行(tr)。该行内的任何东西都将留在该行，不管它之前的行有多少个东西。要实现你想要的，你可以:

A)使用一些JS在每行内重新分发您的cold -md-4div(将您想要显示的前3个复制到第一行，接下来的3个复制到第二行，等等…)

或

B)远离bootstrap并编写一些自定义CSS以消除对行的需求(就像一系列div都向左浮动)

更新:事实上:如果你只是删除包含rowdiv ..它似乎表现得很得体。注意，bootstrap并不是为了在没有行的情况下一直正常工作而编写的，所以在极端情况下可能需要做一些额外的样式。见http://jsfiddle.net/9bHVf/13/

相关文章：