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需要做两件事：

父容器（例如DIV，剖面，侧面，p等）
一个或多个子元素（例如div，p，img等）

您在父级上打开弹性框：display:flex;

然后，有各种开关。有些设置在父项上（例如justify-content），而有些设置在项上（例如flex-grow:1）

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

Here is a great cheatsheet for Flexbox。

观看本教程，从现在开始的40分钟内，您的问题将得到解决-并且您将了解flexbox。

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

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

1 个答案: