主页 / 问题 / 574288
Accepted
Naddyson
Asked:2020-10-06 04:55:03 +0000 UTC2020-10-06 04:55:03 +0000 UTC

打开块时如何使所有较低的块向下移动？

  • 772

我正在使用 Bootstrap 3。页面需要响应，即使每行有两列，我也需要它才能工作。展开第三列时，它可以正常工作。

恰当的

不合适

var main = function() {
  $(".panel-heading").click(function() {
    $(this).siblings(".panel-body").slideToggle(240);
  });

}
$(document).ready(main);
.panel-container {
  padding: 5px !important;
}
.container {
  height: 100%;
}
.panel-body {
  display: none;
}
.panel-heading:hover {
  cursor: pointer;
}
<div class="panel-container col-lg-4">
  <div class="panel panel-default">
    <div class="panel-heading">
      Head panel
    </div>
    <div class="panel-body">
      Content...
    </div>
  </div>
</div>

html

1 个回答

  1. Best Answer

    .clearfix根据以下原则，每 3 (2) 列插入一个块：

    <div class="panel-container col-sm-6 col-lg-4">...</div> <!-- Блок #1 -->
<div class="panel-container col-sm-6 col-lg-4">...</div> <!-- Блок #2 -->
<div class="clearfix visible-sm visible-md">...</div>    <!-- Начинаем новый ряд для блоков по 2 в ряд -->
<div class="panel-container col-sm-6 col-lg-4">...</div> <!-- Блок #3 -->
<div class="clearfix visible-lg"></div>                  <!-- Начинаем новый ряд для блоков по 3 в ряд -->
<div class="panel-container col-sm-6 col-lg-4">...</div> <!-- Блок #4 -->
<div class="clearfix visible-sm visible-md">...</div>    <!-- Начинаем новый ряд для блоков по 2 в ряд -->
<div class="panel-container col-sm-6 col-lg-4">...</div> <!-- Блок #5 -->
<div class="panel-container col-sm-6 col-lg-4">...</div> <!-- Блок #6 -->
<div class="clearfix visible-sm visible-md">...</div>    <!-- Начинаем новый ряд для блоков по 2 в ряд -->
<div class="clearfix visible-lg"></div>                  <!-- Начинаем новый ряд для блоков по 3 в ряд -->
    • 在xs屏幕上 - 方块将排成一排；
    • 在- 两个，以;sm为代价.col-sm-6
    • On-md二，.col-md-x不指定，表示同上一个尺寸的屏幕；
    • 在lg- 三，以 . 为代价.col-lg-4。

    代价是调整不同屏幕尺寸.visible-xx的块的可见性（和实际效果） 。.clearfix

    • 1

相关问题