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

尝试在img标签中将float-right替换为ml-auto，如下所示：

<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>

Answer 2

将order-1添加到img（内置property =最小代码）：

通过修改HTML来更改媒体对象中内容的顺序本身，或添加一些自定义flexbox CSS来设置order属性（为您选择的整数）。 https://getbootstrap.com/docs/4.4/components/media-object/#order

.order-1 CSS：

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

通过少数顺序更改特定弹性项目的视觉顺序实用程序。 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 3

我通过用ml-3替换mr-3并用order-3右浮动来解决了这个问题

访问以下链接以获取更多详细信息 https://getbootstrap.com/docs/4.4/utilities/flex/#order

我正在尝试使用bootstrap4对齐我的图像，但是它不起作用

3 个答案: