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

1 个答案: