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

Answer 2

您可以使用 Flex 实用程序

d-flex justify-content-end

:

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

参考 Bootstrap DOCS

Answer 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="float-right"  alt="our Logo">
    </div>
</div>