Question

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

如果我想用文本来做，我只会这样做：

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

似乎没有等效的“图像权”。有“向右浮动”，但这将下面的文本拉了起来，这不是我们想要的。

对此进行了尝试，但没有效果：

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

但这也可以使图像牢固地粘贴在左侧。

有什么建议如何将图像放置在页面的右侧，而将其左侧的空间保留为空白？

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

您可以使用弹性工具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代替右上角：

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

引导程序，如何使图像移到右侧？

3 个答案: