Question

我在Collapsible div中使用了某些图像。最初，当我单击“显示”按钮时，图像将以平滑的滚动效果显示。但是稍后当我再次单击“显示”按钮时，带有图像的div会折叠回来，而不是之前的平滑slideOut效果。

这是我的代码：

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Display</button>
        <div id="demo" class="collapse">
            <div class="col-md-2 col-sm-6 col-xs-12">
                <img src="http://1.bp.blogspot.com/_L_49bG_P4Yg/S2tE0k0lm7I/AAAAAAAAAN4/o7H_C5SRFug/s400/steve-jobs-3g-iphone.jpg" class="img-responsive" alt="img1">
            </div>
            <div class="col-md-2 col-sm-6 col-xs-12">
                <img src="http://1.bp.blogspot.com/_L_49bG_P4Yg/S2tE0k0lm7I/AAAAAAAAAN4/o7H_C5SRFug/s400/steve-jobs-3g-iphone.jpg" class="img-responsive" alt="img1">
            </div>
            <div class="col-md-2 col-sm-6 col-xs-12">
                <img src="http://1.bp.blogspot.com/_L_49bG_P4Yg/S2tE0k0lm7I/AAAAAAAAAN4/o7H_C5SRFug/s400/steve-jobs-3g-iphone.jpg" class="img-responsive" alt="img1">
            </div>
            <div class="col-md-2 col-sm-6 col-xs-12">
                <img src="http://1.bp.blogspot.com/_L_49bG_P4Yg/S2tE0k0lm7I/AAAAAAAAAN4/o7H_C5SRFug/s400/steve-jobs-3g-iphone.jpg" class="img-responsive" alt="img1">
            </div>
            <div class="col-md-2 col-sm-6 col-xs-12">
                <img src="http://1.bp.blogspot.com/_L_49bG_P4Yg/S2tE0k0lm7I/AAAAAAAAAN4/o7H_C5SRFug/s400/steve-jobs-3g-iphone.jpg" class="img-responsive" alt="img1">
            </div>
            <div class="col-md-2 col-sm-6 col-xs-12">
                <img src="http://1.bp.blogspot.com/_L_49bG_P4Yg/S2tE0k0lm7I/AAAAAAAAAN4/o7H_C5SRFug/s400/steve-jobs-3g-iphone.jpg" class="img-responsive" alt="img1">
            </div>
        </div>
    </div>
</body>

</html>

Answer 1

使collapse也成为Bootstrap row。不仅列应该在一行中，它还会使collapsing转换更明显。

<div class="container">
  <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Display</button>
  <div id="demo" class="row collapse">
    <div class="col-md-2 col-sm-6 col-xs-12">
      <img src="http://1.bp.blogspot.com/_L_49bG_P4Yg/S2tE0k0lm7I/AAAAAAAAAN4/o7H_C5SRFug/s400/steve-jobs-3g-iphone.jpg" class="img-responsive" alt="img1">
    </div>
    <div class="col-md-2 col-sm-6 col-xs-12">
      <img src="http://1.bp.blogspot.com/_L_49bG_P4Yg/S2tE0k0lm7I/AAAAAAAAAN4/o7H_C5SRFug/s400/steve-jobs-3g-iphone.jpg" class="img-responsive" alt="img1">
    </div>
    <div class="col-md-2 col-sm-6 col-xs-12">
      <img src="http://1.bp.blogspot.com/_L_49bG_P4Yg/S2tE0k0lm7I/AAAAAAAAAN4/o7H_C5SRFug/s400/steve-jobs-3g-iphone.jpg" class="img-responsive" alt="img1">
    </div>
    <div class="col-md-2 col-sm-6 col-xs-12">
      <img src="http://1.bp.blogspot.com/_L_49bG_P4Yg/S2tE0k0lm7I/AAAAAAAAAN4/o7H_C5SRFug/s400/steve-jobs-3g-iphone.jpg" class="img-responsive" alt="img1">
    </div>
    <div class="col-md-2 col-sm-6 col-xs-12">
      <img src="http://1.bp.blogspot.com/_L_49bG_P4Yg/S2tE0k0lm7I/AAAAAAAAAN4/o7H_C5SRFug/s400/steve-jobs-3g-iphone.jpg" class="img-responsive" alt="img1">
    </div>
    <div class="col-md-2 col-sm-6 col-xs-12">
      <img src="http://1.bp.blogspot.com/_L_49bG_P4Yg/S2tE0k0lm7I/AAAAAAAAAN4/o7H_C5SRFug/s400/steve-jobs-3g-iphone.jpg" class="img-responsive" alt="img1">
    </div>
  </div>
</div>

演示：http://www.bootply.com/JiLo58P3zm

Bootstrap折叠<div>不会顺利关闭

1 个答案: