Плавающий правый элемент внутри Bootstrap 4 работает по-другому, чем Bootstrap 3

Question

<div class='img-thumbnail'>
    <img src="a.jpg" class='img-fluid'>
</div>

Это то, что у меня есть в html-файле с начальной загрузкой 4 css. Изображение входит в красивую коробку. Когда я добавляю заголовок h4, он также появляется под изображением внутри коробки.

<div class='img-thumbnail'>
    <img src="a.jpg" class='img-fluid'>
    <h4>filename:a.jpg</h4>
</div>

Но когда я плаваю правильно, используя класс начальной загрузки .float-right или style='float:right', элемент переходит на правую сторону, но выходит из эскиза. Пожалуйста помоги.

<div class='img-thumbnail'>
    <img src="a.jpg" class='img-fluid'>
    <h4 class='float-right'>filename:a.jpg</h4>
</div>

В начальной загрузке 3, .pull-right класс - это то, что использовалось, и оно правильно помещает его вправо, все еще внутри поля миниатюр.

Полный код

<div class='container'>
 <div class='row'>
  <div class='col-3'>
    <p class='lead'>LOL</p>
    <ul class='list-group'>
      <li class='list-group-item active'>Something 1</li>
      <li class='list-group-item'>Something 2</li>
      <li class='list-group-item'>Something 3</li>
    </ul>
  </div>
  <div class='col-9'>
    <div class='img-thumbnail'>
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/2000px-Google_%22G%22_Logo.svg.png" class='img-fluid'>
      <h4 class='float-right'>$9.99</h4>
    </div>
  </div>
 </div>
</div>

Answer 1

просто добавьте класс d-inline-block с классом img-thumbnail.

вот код.

<div class='img-thumbnail d-inline-block'>
    <img src="a.jpg" class='img-fluid'>
    <h4 class='float-right'>filename:a.jpg</h4>
</div> 

Answer 2

Посмотрите на разницу в img-thumbnail от Bootstrap 3.x до 4.x:

Bootstrap 4.x:

.img-thumbnail {
  padding: 0.25rem;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  max-width: 100%;
  height: auto;
}

Bootstrap 3.x:

.img-thumbnail {
  display: inline-block;
  max-width: 100%;
  height: auto;
  padding: 4px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: all .2s ease-in-out;
       -o-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
}

Разница в том, что используется 3.x display:inline-block. Таким образом, чтобы создать тот же эффект в 4.x, вы можете просто добавить d-inline-block к img-thumbnail ...

   <div class='img-thumbnail d-inline-block'>
      <img src=".." class='img-fluid'>
      <h4 class='float-right'>$9.99</h4>
   </div>

https://www.codeply.com/go/r75rriVhX3