右侧最大宽度的 Bootstrap 图像

2024-05-13 • 问答

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

.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% 宽度并向右对齐？

sadsasafsa 回答：右侧最大宽度的 Bootstrap 图像

这是您的示例，它运行良好。您要么需要添加一个可重现的问题示例，要么找到您的代码和我的示例之间的区别。我可以猜测出于某种原因，您的 .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>

css html image twitter-bootstrap

本文链接：https://www.f2er.com/5172.html

右侧最大宽度的 Bootstrap 图像

sadsasafsa 回答：右侧最大宽度的 Bootstrap 图像

大家都在问