javascript - 使用搜索过滤器 Bootstrap 时如何 float div

Question

我创建了一个可以通过两种方式过滤的图库。一个通过单击按钮，另一个通过搜索过滤器。过滤器工作完美，除了当 div 隐藏在过滤器上时，其余显示的 div 不会彼此相邻 float 。

这是过滤前的样子:

过滤后是这样的:

我怎样才能让所有的 dancer2 彼此相邻并且每 4 个 dancer 才开始一个新行？

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

当您使用“行”类声明一个新的 div 时，它将开始一个新行。如果您希望所有这些元素并排显示，它们应该都在同一个“行”div 中。 Bootstrap 样式将自动并排保留最多 4 张图片并换行(因为您将 col-sm-3 作为单张图片的类)。 Bootstrap 行最长可达 12 个单位。每增加一个新元素，如果超过12个，就会换行到下一行。