使用搜索过滤器引导程序时如何浮动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，它将换行到下一行。