Javascript 我应该在何处添加“弯曲方向”属性。我应该添加到引导行或列吗？ 在这里，我添加了我更改代码前后的代码示例，但不知道有什么区别，我的网站上的图片是在我更改了这段代码后出现的 =======之前====== {{catalog.name} scss .目录

我应该在何处添加“弯曲方向”属性。我应该添加到引导行或列吗？

• 在这里，我添加了我更改代码前后的代码示例，但不知道有什么区别，我的网站上的图片是在我更改了这段代码后出现的

---

=======之前======
{{catalog.name}
scss
.目录{
填充物：5px；
高度：400px；
.图像包裹{
位置：绝对位置；
左：0；
弯曲方向：立柱；
填充：0；
身高：100%；
img{
宽度：自动；
最大宽度：80%；
最大高度：100%；
&.pp默认图像{
宽度：50%；
}
}
}
======之后==============
======在这里，我已将图像文本移动到第一个div=======
======其次，我将flex direction从图像包裹类移动到了类别类========
{{catalog.name}
scss
.类别{
填充物：5px；
高度：400px；
弯曲方向：立柱；
.图像包裹{
位置：绝对位置；
左：0；
//弯曲方向：立柱；
填充：0；
身高：100%；
img{
宽度：自动；
最大宽度：80%；
最大高度：100%；
&.pp默认图像{
宽度：50%；
}
}
}

• 我不知道有什么不同，在我移动了flex-direction后，图像开始显示
• 谁能解释一下是什么造成了这一差异
• 我从来没有问过关于堆栈溢出和代码的问题。很抱歉给您带来不便

---

请让我知道更多信息。谢谢您能在中创建此文件吗？

======Before======
<div class="row p-0 m-0 h-100 card-container catalog ">

<!---Image----->
    <div class="col-12 d-flex justify-content-center align-items-center image-wrap">
        <img alt="{{ catalog.name }}" class="p-0 m-0 ghost-hidden" [src]="catalog.image"  *ngIf="catalog.image">
    </div>


<!-- name of Image-->   
    <div class="col-12 ghost-bg ghost-bg-dark catalog-wrap">
        <h3 class="p-0 m-0 ghost-bar ghost-white g-w-80">
            {{ catalog.name }}
        </h3>
        <h3 class="ghost-visible-element ghost-bar ghost-white g-w-50"></h3>
    </div>


<!--  Icon--->
    <div class="d-flex align-items-center justify-content-center more">
        <i class="icon-arrow-slice"></i>
    </div>
</div>





scss

.catalog {
        padding: 5px;
        height: 400px;

        .image-wrap {
            position: absolute;
            left: 0;
            flex-direction: column;
            padding: 0;
            height: 100%;

            img {
                width: auto;
                max-width: 80%;
                max-height: 100%;

                &.pp-default-image {
                    width: 50%;
                }
            }
        }




======After==============
====== Here i have moved Image text the first div=======
====== secondly i have moved flex-direction from my image-wrap class to category class========
<div class="row p-0 m-0 h-100 catalog-card-container catalog">

<!--- Image Text--->
  <div class="col-12 ghost-bg ghost-bg-dark catalog-wrap">
    <h3 class="p-0 m-0 ghost-bar ghost-white g-w-80">
      {{ catalog.name }}
    </h3>
    <h3 class="ghost-visible-element ghost-bar ghost-white g-w-50"></h3>
  </div>


<!-- Image--->
    <div class="col-12 d-flex justify-content-center align-items-center image-wrap">
        <img alt="{{ catalog.name }}" class="p-0 m-0 ghost-hidden" [src]="catalog.image" [default]="setDefaultImg(catalog.uiMetadata.style)" *ngIf="catalog.image">
    </div>


<!--Icon--->

    <div class="d-flex align-items-center justify-content-center more">
        <i class="icon-arrow-slice"></i>
    </div>
</div>





scss


.category {
    padding: 5px;
    height: 400px;
    flex-direction: column;
        .image-wrap {
            position: absolute;
            left: 0;
            // flex-direction: column;
            padding: 0;
            height: 100%;

            img {
                width: auto;
                max-width: 80%;
                max-height: 100%;

                &.pp-default-image {
                    width: 50%;
                }
            }
        }