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

我有以下代码：

HTML

目标是此文本框将根据输入文本显示/隐藏元素。这是可行的，但由于我使用引导定义行的方式，元素仍然绑定到它们所定义的行，而不是动态地重新排序。我还在学习Bootstrap，不知道如何获取它们，以便搜索结果显示在第一个可用的“槽”中。我该怎么做

---

给你。搜索

call

，我想你会明白我的意思。

仅在引导中，没有办法让

col

div以这种方式运行。将

行

视为表行（

tr

）。该行中的任何内容都将保留在该行中，而不管它前面的行中有多少内容。要实现您的目标，您可以：

A） 使用一些JS在每行中重新分配col-md-4 div（将要显示的部分复制到第一行中，将前3个复制到第二行中，以此类推）

或

B） 远离引导，编写一些自定义CSS，以消除对行的需要（就像一系列向左浮动的div）

更新： 事实上：如果您只是删除包含

行的
div。。它似乎举止得体。注意：在没有行的情况下，bootstrap并不是一直都能正常工作，因此在边缘情况下，您可能需要进行一些额外的样式设置。
请参见
我认为可以删除新行的声明

删除第二个
，以便网格行中有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>


...
...
...
...
...
...

更新的fiddle:
为什么要使用列？将结果放入无序列表中，将所有listitems元素浮动到左侧，并使用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>



花式结果1
花式结果2
花式结果3
花式结果4
幻想的结果5


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

脏样：
我最初试过，因为我认为这是最好、最明显的解决方案。但有时我会在它们自己的行中获取元素。你在小提琴中看不到它，但在我的实际代码中，前6个元素被正确地分成两行，每行3个，然后第三行在右边的列中有一个元素，第四行有3个元素，第五行在右边的列中有一个元素，等等。对这种行为有何解释？是否需要清除浮子或类似物？这取决于
.col-md-4
的高度。如果您可以为所有这些设置一个固定的高度（如
高度：400px）
，那么它将起作用。（请确保不要在所有
.col-md-4
上全局使用它，而是为父行指定一个特殊类，并使用
.search grid.col-md-4
选择子行）在看到您建议它之前，我确实为它指定了一个特殊类；）设置为200px的固定高度对我来说效果很好。谢谢嗨，肯尼，请你看看我在另一个答案上留下的评论，看看你对我看到的行为有什么解释吗？谢谢。这与引导程序在
col-md-4
div上的样式有关。您真的应该删除行，删除col-md-4类，并为col-md-4 div编写一些自定义样式
<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>

<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>