bootstrap-4 - Bootstrap 4 - 如何使图像位于右侧？

Question

我正在尝试将一个简单的图像排成一行并使其位于页面的右侧。

如果我想用文本来做这件事，我会简单地这样做:

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

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

关于如何将图像放在页面右侧，同时保持左侧空白的任何建议？

Answer 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;
}