如何在单击按钮时向左滑动图像和滑入文本

Question

我是网页设计方面的新手。

我已将图像居中，在其下方放置了一个按钮，当我单击此按钮时，图像下方会出现一些文本。当我再次点击按钮时，文本向上，所以我们看到了初始视图：只有图像和按钮（类似于这里的效果https://www.w3schools.com/bootstrap4/bootstrap_collapse.asp）。

<div class="container">
  <h2>Simple Collapsible</h2>
  <p>Click on the button to toggle between showing and hiding content.</p>
  <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

现在，我不想让此文本出现在图像下方，我希望图像向左移动，并且在单击该按钮时文本出现在图像之前的位置，甚至在右侧多一点，但仍然在同一行。

有人可以帮我做这件事吗？谢谢！

Answer 1

Bootstrap 没有预制方法来做你想做的事，你不能调整 collapse 方法来做。

但是，您可以在 Bootstrap 网格系统中轻松完成您想做的事情 - 只是不使用预制的 Bootstrap 工具。

这可能是这样的：

$('.btn').click(function(){
   $('.imgDiv').animate({
      width: '0px'
   },1000, function(){
     $('img').css('width','0px');
   });
   $('.txtDiv').animate({
    width: '90vw',
    marginLeft: '10vw'
   },1000, function(){
      $(this).removeClass('hidden');
   });
});

.full-width {width:100vw;}
.imgDiv{min-height:110px;}

/* max-height required so zero-width does not auto-expand height */
.hidden{width:0px;max-height:100px;overflow:hidden;}

<div class="container">

  <div class="row flex-nowrap">
    <div class="imgDiv text-center full-width">
      <img src="http://placekitten.com/100/100" />
    </div><!-- .imgDiv -->
    <div class="txtDiv hidden">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div><!-- .txtDiv -->
  </div><!-- .row -->
  
  <div class="row d-flex justify-content-center">
    <button type="button" class="btn btn-primary">Show Text</button>
  </div><!-- .row -->
  
</div><!-- .container -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

因为 Bootstrap4 是基于 flexbox 构建的（事实上，整个 Bootstrap 网格都是围绕 Bootstrap4 中的 flexbox 重新设计的），所以了解一些 Bootstrap flexbox classes 很重要。

Bootstrap 将整个平台从 Bootstrap3 重新设计为 Bootstrap4 是有原因的，主要是为了从使用浮点数改为使用 flexbox。

Flexbox 需要两件事：

1. 父容器（例如 DIV、section、aside、p 等）

2. 一个或多个子元素（例如 div、p、img 等）

您在父级上打开 flexbox：display:flex;

然后，有各种开关。有些设置在父项上（如justify-content），但其他可能设置在项目上（如flex-grow:1）

YouTube tutorial - fast-paced and best-of-breed

Here is a great cheatsheet 用于 Flexbox。

观看教程，40 分钟后您的问题将得到解决——您将了解 flexbox。

_{附注我与视频或其演示者没有任何联系 - 我很幸运发现了它，现在将它传递出去。}