右侧具有最大宽度的引导图像答案

【问题标题】：Bootstrap image on right with max width右侧具有最大宽度的引导图像
【发布时间】：2021-10-06 16:41:14
【问题描述】：

我希望我的图像右对齐。所以我这样做了：

.section {
    margin-bottom: var(--double-margin);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; 
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> 
<div class="container">
    <div class="section">
        <div class="row">
            <div class="col">
                <img class="rounded float-right w-50" src="https://via.placeholder.com/1000x200.jpg"/>
           </div>          

           <div class="col">
               <p>So other text</p>
           </div>
       </div>
    </div>
</div>

结果，我的图像在左侧（因为 w-50）。那么如何告诉我的图片应该是 50% 的宽度并向右对齐呢？

【问题讨论】：

标签： html css image twitter-bootstrap

【解决方案1】：

这是您的示例，它运行良好。您要么需要添加一个可重现的问题示例，要么找到您的代码与我的示例之间的差异。我可以猜测由于某种原因，您的 .col 没有增长到 100% 的宽度，这就是为什么图像与较小容器的右侧对齐，而对您而言，它看起来像是与左侧对齐。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col">
    <img class="rounded float-right w-50" src="https://via.placeholder.com/1000x200.png"/>
</div>

【讨论】：

@AdamJachocki 好吧，第一个问题是您的浮点数无法像 Bootstrap 5 位置那样从左/右重命名为开始/结束。使用float-end 类将图像与容器的右侧对齐。另外，你到底想达到什么目的？你想让文字环绕图片吗？
@AdamJachocki 很高兴它有帮助，您还可以将text-end 类添加到图像col，这样您就不需要使用专为不同目的而设计的浮动:)跨度>