使用搜索過濾器引導程序時如何浮動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，它將換行到下一行。