控制 div 标签和 Umbraco

Question

我正在努力将我的 div 标签与 Umbraco 网格放在一起。它应该是这样的：

我可以通过在代码中设置 <br> 标签来实现，但这当然不是一个好的做法：

<div class="background-image" @Html.Raw(topImageStyling)></div>
    <div class="max-container">
        <div class="fade"></div>

        <header>
            <div class="max-container">
                <div class="logo-container">
                    <a href="@homePage.Url">
                        <!-- <img src="/img/logo-white.svg" data-svg-fallback="/img/logo-white.png" alt="@logoAltText" class="img-responsive logo" /> -->
                    </a>
                </div>
            </div>
        </header>
    </div>


    <!-- Content -->
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                @Umbraco.RenderMacro("Ebook")
            </div>
        </div>
    </div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <div class="row">
        <div class="col-md-12>
            <div class="row">
                <div class="col-lg-12">
                    @CurrentPage.GetGridHtml("Grid")
                </div>
            </div>
        </div>
    </div>

如果我删除 <br> 标签，页面将如下所示：

有人知道我该如何解决吗？

Answer 1

使用大量 <br> 标签绝不是一个好习惯。

您可以通过 CSS 添加 margin 或 padding。

在这种情况下，您的表单似乎是绝对定位的。因此，您的页面不会在容器中跟踪其尺寸。

您可能想在 CSS 中设置容器的最小高度。

例如，您可以添加样式标签。请不要使用实际的样式标签，并编辑您的 CSS 文件：

CSS

.myHeader {
    min-height:500px;
}

HTML

<!-- Content -->
<div class="container-fluid" class="myHeader">
    <div class="row">
        <div class="col-lg-12">
            @Umbraco.RenderMacro("Ebook")
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12>
        <div class="row">
            <div class="col-lg-12">
                @CurrentPage.GetGridHtml("Grid")
            </div>
        </div>
    </div>
</div>

控制 div 标签和 Umbraco

control div tags along with Umbraco

html

css

umbraco