使用搜索过滤器引导程序时如何浮动div

Question

我创建了一个可以通过两种方式过滤的画廊。 一个通过单击按钮，另一个通过搜索过滤器。 过滤器运行良好，除非div隐藏在过滤器上，否则其余显示的div不会彼此浮动。

这是过滤之前的样子：

过滤后，结果如下所示：

我如何才能让舞者2彼此紧挨在一起，并且每4个舞者只开始新一排？

 $(document).ready(function() { $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $(".column").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); 

 .column { float: right; display: none; /* Hide columns by default */ } .content { background-color: white; padding: 10px; text-align: center; } .show { display: block; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="row container" style="margin: auto;"> <div class="col-sm-4"> <input type="text" id="myInput" placeholder="Search for names.."> </div> <div class="col-sm-8" style="text-align: right;"> <div id="myBtnContainer" class="container" style="padding-bottom: 2rem;"> <button class="btn active" onclick="filterSelection('all')"> Show all</button> <button class="btn" onclick="filterSelection('teachera')"> teachera</button> <button class="btn" onclick="filterSelection('teacherb')"> teacherb</button> <button class="btn" onclick="filterSelection('teacherc')"> teacherc</button> </div> </div> </div> <!--DANCER GALLERY--> <div class="row container" style="margin: auto; margin-bottom: 2rem;"> <div class="col-sm-3 column teachera"> <a href="#" class="link"> <div class="content"> <img src="http://placehold.it/175x250" alt="Dancer1" style="width:80%; height: 200px;"> <h4>Dancer1</h4> <p>teachera</p> </div> </a> </div> <div class="col-sm-3 column teachera"> <a href="#" class="link"> <div class="content"> <img src="http://placehold.it/175x250" alt="Dancer2" style="width:80%; height: 200px;"> <h4>Dancer2</h4> <p>teachera</p> </div> </a> </div> <div class="col-sm-3 column teachera"> <a href="#" class="link"> <div class="content"> <img src="http://placehold.it/175x250" alt="Dancer3" style="width:80%; height: 200px;"> <h4>Dancer3</h4> <p>teachera</p> </div> </a> </div> <div class="col-sm-3 column teachera"> <a href="#" class="link"> <div class="content"> <img src="http://placehold.it/175x250" alt="Dancer4" style="width:80%; height: 200px;"> <h4>Dancer4</h4> <p>teachera</p> </div> </a> </div> </div> <div class="row container" style="margin: auto; margin-bottom: 2rem;"> <div class="col-sm-3 column teacherb"> <a href="#" class="link"> <div class="content"> <img src="http://placehold.it/175x250/ff0000" alt="Dancer1a" style="width:80%; height: 200px;"> <h4>Dancer1</h4> <p>teacherb</p> </div> </a> </div> <div class="col-sm-3 column teacherb"> <a href="#" class="link"> <div class="content"> <img src="http://placehold.it/175x250/ff0000" alt="Dancer2a" style="width:80%; height: 200px;"> <h4>Dancer2</h4> <p>teacherb</p> </div> </a> </div> <div class="col-sm-3 column teacherb"> <a href="#" class="link"> <div class="content"> <img src="http://placehold.it/175x250/ff0000" alt="Dancer3a" style="width:80%; height: 200px;"> <h4>Dancer3</h4> <p>teacherb</p> </div> </a> </div> <div class="col-sm-3 column teacherb"> <a href="#" class="link"> <div class="content"> <img src="http://placehold.it/175x250/ff0000" alt="Dancer4a" style="width:80%; height: 200px;"> <h4>Dancer4</h4> <p>teacherb</p> </div> </a> </div> </div> <div class="row container" style="margin: auto; margin-bottom: 2rem;"> <div class="col-sm-3 column teacherc"> <a href="#" class="link"> <div class="content"> <img src="http://placehold.it/175x250/ffff00" alt="Dancer1b" style="width:80%; height: 200px;"> <h4>Dancer1</h4> <p>teacherc</p> </div> </a> </div> <div class="col-sm-3 column teacherc"> <a href="#" class="link"> <div class="content"> <img src="http://placehold.it/175x250/ffff00" alt="Dancer2b" style="width:80%; height: 200px;"> <h4>Dancer2</h4> <p>teacherc</p> </div> </a> </div> <div class="col-sm-3 column teacherc"> <a href="#" class="link"> <div class="content"> <img src="http://placehold.it/175x250/ffff00" alt="Dancer3b" style="width:80%; height: 200px;"> <h4>Dancer3</h4> <p>teacherc</p> </div> </a> </div> <div class="col-sm-3 column teacherc"> <a href="#" class="link"> <div class="content"> <img src="http://placehold.it/175x250/ffff00" alt="Dancer4b" style="width:80%; height: 200px;"> <h4 class="dancerName">Dancer4</h4> <p>teacherc</p> </div> </a> </div> </div> 

Answer 1

当使用“ row”类声明新的div时，它将开始新的一行。 如果希望所有这些元素并排显示，则它们都应位于同一“行” div中。 引导样式将自动最多并排保留4张图片并换行到新行（因为您将col-sm-3作为单独图片的类）。 自举行的长度最多为12个单位。 每次添加新元素时，如果超过12，它将换行到下一行。