时间戳

首页 > 解决方案 > Bootstrap 4 - w-100 不适合父 flex div ...如果小于父 div？

twitter-bootstrap - Bootstrap 4 - w-100 不适合父 flex div ...如果小于父 div？

问题描述

我对此感到头疼，似乎无法解决。

当我向桌面站点添加 100px 宽度的图像并将类应用w-100到它时，它应该拉伸到父 div 的宽度（在本例中为列），对吗？当你这样做时，它是这样工作的：

<div class="row">
    <div class="col-md-8">
        <img src="image-w100px.jpg" class="img-fluid w-100">
    </div>
    <div class="col-md-4">
    </div>
</div>

但是，如果我尝试在 flex div 中做同样的事情（将图片居中/中间对齐到大量文本旁边，它将无法正常工作

<div class="row">
    <div class="col-md-8 flex">
        <div class="align-self-center">
            <img src="image-w100px.jpg" class="img-fluid w-100">
        </div>
    </div>
    <div class="col-md-4">
        Large amount of text (picture on the left should vertically align.
    </div>
</div>

我已经尝试了每一种组合（单独的 img-fluid，单独的 w-100，img-fluid 和 w-100 的组合，删除类并添加 style="width: 100% !important"），但没有一种可能性让我的 img比原始大小进一步扩展，它将压缩/调整到较小的大小，但不会扩展。

为什么这不起作用？

标签： twitter-bootstrapbootstrap-4

解决方案

在测试了更多之后，我找到了解决方案。添加w-100到align-self-center类中，它现在可以工作：

<div class="row">
    <div class="col-md-8 flex">
        <div class="align-self-center w-100">
            <img src="image-w100px.jpg" class="img-fluid w-100">
        </div>
    </div>
    <div class="col-md-4">
        Large amount of text (picture on the left should vertically align.
    </div>
</div>

推荐阅读