Как сдвинуть изображение влево и вставить текст по нажатию кнопки

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 была изменена вокруг flexbox в Bootstrap4), важно знать некоторые Bootstrap классы flexbox .

Есть причина, по которой Bootstrap полностью изменил всю платформу с Bootstrap3 до Bootstrap4, в первую очередь, чтобы перейти от использования float к flexbox.

Flexbox требуется две вещи:

1. Родительский контейнер (например, DIV, раздел, в стороне, p и т. Д.)

2. Один или несколько дочерних элементов (например, div, p, img и т. Д.)

Включите flexbox на на родительском: display:flex;

Затем существуют различные переключатели . Некоторые из них установлены на родительском (как в случае justify-content), но другие могут быть установлены на элементы (как с flex-grow:1)

Учебник YouTube - быстро развивающийся и лучший в своем классе

Вот отличная таблица для Flexbox.

Посмотрите учебник, и через 40 минут ваша проблема будет решена - и вы узнаете flexbox.

_{P.S. У меня нет связи с видео или его ведущим - мне повезло обнаружить его, и теперь я передаю его.}