Bootstrap 4 - 如何使图像转到右侧？答案

【问题标题】：Bootstrap 4 - how to make image go to right hand side?Bootstrap 4 - 如何使图像转到右侧？
【发布时间】：2022-04-23 00:09:36
【问题描述】：

我正在尝试将一个简单的图像连续放置并使其位于页面的右侧。

如果我想对文本执行此操作，我会这样做：

<div clas="row">
    <div class="col text-right">
        <h1>Im on the right</h1>
    </div>
</div>

似乎没有等效的image-right。有float-right，但这会将下面的文本拉上来，这不是我们想要的。

试过这个，但没有效果：

<div class="row">
    <div class="col">
        <img src="images/MyLogo.png" class="pull-right" style="height: 200px" alt="our Logo">
    </div>
</div>

作为一个老式的 html 表格用户，我想我可以在左侧创建虚拟的空列，尽管这不是我们想要的，因为当屏幕变小时列会“中断”：

<div class="row">
    <div class="col-xs-10">
        <div>
            <div class="col-xs-2">
                <img src="images/MyLogo.png"  style="height: 200px" alt="our Logo">
        </div>
    </div>
</div>

但这也使图像牢牢地粘在左侧。

有什么建议可以把图片放在页面的右边，而左边的空间是空白的吗？

【问题讨论】：

标签： bootstrap-4

【解决方案1】：

这里不是很清楚您的目标是什么（添加更多详细信息或提供确切的 html 代码可能会解决问题），但如果我理解正确，您需要一张图片来获取整行并向右浮动，并留出空间您的图像左侧应该是空的。如果是这种情况，这对您来说应该可以正常工作：

<div class="row">
  <div class="col">
    <img src="images/MyLogo.png" class="pull-right" style="height: 200px" alt="our Logo">
  </div>
</div>

.col {
text-align: right;
}
.pull-right {
margin: 0 0 0 auto;
}

【讨论】：

【解决方案2】：

您可以使用弹性实用程序d-flex justify-content-end:

<div class="row">
    <div class="col d-flex justify-content-end">
        <img src="" alt="">
    </div>
</div>

参考Bootstrap DOCS

【讨论】：

【解决方案3】：

你可以用rounded float-right代替pull-right：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


<div class="row">
    <div class="col">
        <img src="https://dummyimage.com/150x100/000/fff" class="rounded float-right"  alt="our Logo">
    </div>
</div>

【讨论】：