Html 如何保留父级的样式

我在foreach中有以下代码：

FOREACH:
<div class="col-md-1" style="max-width: 50% !important" id="pageList_{{ presentationPage.position }}">
    <a href="/customer/presentations/{{ id }}/edit?position={{ presentationPage.position }}">
        <div class="slide-preview" style="background-color:{% if (presentationPage.position == activePresentationPage.position) %}#ffffff{% else %}#bbbbbb{% endif %}; border: 1px solid #000000; width:100%; padding:2px 5px; margin:5px; color:#000000; text-align:center;">
                                            {{ presentationPage.position }}
        </div>
    </a>
</div>
ENDFOREACH

FOREACH:
ENDFOREACH

渲染时看起来像这样：

但是，当我添加类似于元素或div的内容时，您可以在下面的代码中看到：

<div>
    FOREACH:
    <div class="col-md-1" style="max-width: 50% !important" id="pageList_{{ presentationPage.position }}">
        <a href="/customer/presentations/{{ id }}/edit?position={{ presentationPage.position }}">
            <div class="slide-preview" style="background-color:{% if (presentationPage.position == activePresentationPage.position) %}#ffffff{% else %}#bbbbbb{% endif %}; border: 1px solid #000000; width:100%; padding:2px 5px; margin:5px; color:#000000; text-align:center;">
                                            {{ presentationPage.position }}
            </div>
        </a>
    </div>
    ENDFOREACH
</div>

FOREACH：
ENDFOREACH

渲染时，整个对象如下所示：

---

我似乎不知道为什么。简单的检查不会带来任何洞察。

这是因为在两个元素周围放置的div没有指定的宽度和高度。因此，div的宽度和高度将基于其内容的大小。然后，两个元素的宽度和高度将基于其父元素的宽度和高度，因此它将变得非常小

---

因此，如果你给父div一个宽度和高度，结果应该是可以的。

试着给父div添加一个属性为

width:100%的样式；身高：100%

您能否提供代码段中可用和不可用的html（Ctr-M）？如果您使用的是引导，请尝试在包装器div中添加

class=“row”

。谢谢您，就是这样。设置宽度/高度也不起作用。添加class=“row”完成了！如果你提供它作为一个答案，我将很高兴接受它