html - 与 Umbraco 一起控制 div 标签

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>标签绝不是一个好习惯。

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

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

您可能想在 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>