Я пытаюсь выровнять свое изображение с помощью bootstrap4, но оно не работает

Question

Я пытаюсь выровнять изображение справа, но оно не работает.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="media">
    <img class="d-flex mr-3 img-thumbnail float-right" src="https://picsum.photos/200/100" alt="grand-buffet">
    <div class="media-body">
       <h2 class="mt-0">Weekend Grand Buffet <span class="badge badge-danger">NEW</span></h2>
       <p class="d-none d-sm-block">Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers, six main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per person </p>
    </div>
 </div>

Answer 1

Добавить order-1 в img (встроенный property = минимальный код):

Изменить порядок содержимого в медиа-объектах, изменив сам HTML или добавив пользовательский flexbox CSS, чтобы установить свойство порядка (целое число по вашему выбору). https://getbootstrap.com/docs/4.4/components/media-object/#order

.order-1 CSS:

.order-1 {
    -ms-flex-order: 1;
    order: 1;
}

Измените визуальный порядок заданных элементов c flex с помощью Горстка заказа коммунальных услуг. https://getbootstrap.com/docs/4.4/utilities/flex/#order

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="media">
    <img class="ml-3 img-thumbnail order-1" src="https://picsum.photos/200/100" alt="grand-buffet">
    <div class="media-body">
       <h2 class="mt-0">Weekend Grand Buffet <span class="badge badge-danger">NEW</span></h2>
       <p class="d-none d-sm-block">Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers, six main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per person </p>
    </div>
 </div>

Answer 2

Я исправил эту проблему, заменив mr-3 на ml-3 и float-right на order-3

Для получения более подробной информации перейдите по следующей ссылке https://getbootstrap.com/docs/4.4/utilities/flex/#order

Answer 3

Попробуйте заменить float-right на ml-auto в теге img, как показано ниже:

<div class="media">
    <img class="d-flex img-thumbnail ml-auto" src="img/buffet.png" alt="grand-buffet">
    <div class="media-body">
       <h2 class="mt-0">Weekend Grand Buffet <span class="badge badge-danger">NEW</span></h2>
       <p class="d-none d-sm-block">Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers, six main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per person </p>
    </div>
 </div>