Question

我有以下标记（引导程序4）：

    import pandas as pd

    df = pd.DataFrame({
        'a': [1, None, 3],
        'b': [None, 5, 6],
    })

    filtered = df.loc[df.a == 1, 'b']
    filtered.fillna('', inplace=True)
    df.loc[df.a == 1, 'b'] = filtered
    print(df)

由于容器已弯曲，因此图像正在拉伸。我知道<div class="col-3 d-flex flex-column"> <img class="align-self-center" src="#"/> </div>将解决此问题，但是，我不希望图像居中。我希望图像为align-self-center（左对齐而不是居中），但这又再次拉伸了图像。

有什么办法解决吗？

Answer 1

您在这里！

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="col-3 d-flex flex-column">
    <img class="align-self-start" src="https://dummyimage.com/600x400/000/fff"/>
</div>

Answer 2

应为[{ name=Name, id=1, ownerId=1, ownerName=administrator, featuredImage=21_d20024e8-970f-4738-9cea-8dda22d0afdd.jpg, totalVisit=21 }]。 Bootstrap flex不使用术语align-self-start

Answer 3

使用<img class="align-self-center" src="#"/>代替使用<img class="align-self-start" src="#"/>。这应该可以解决您的问题（基本上，这意味着您的图像将与列的开头对齐）

在flex容器中拉伸的图像但不能使用align-self-center

3 个答案: