Question

在此页面上:(我只是设置一个红色和绿色边框，使其更清晰）

我有一本书的图片，需要在黑色边框的左侧：

我尝试使用下面的代码构建横幅。但我无法弄清楚如何设置一个适合黑色边框左侧的div标签。

有人对如何做到这一点有建议吗？到目前为止的代码是：

<div class="top-area" style="border: 4px solid red;">
    <div class="container" style="border: 4px solid green;">

        @if (!string.IsNullOrEmpty(headerText))
        {
            if (pageAlias == "Blog")
            {
                <h1 class="header-xl center">
                    @Html.Raw(headerText)
                </h1>
            }
            else
            {
                <p class="header-xl center">
                    @Html.Raw(headerText)
                </p>
            }
        }
        @if (CurrentPage.HasValue("imageTeaserText"))
        {
            <p class="sub-header center">
                @Html.Raw(CurrentPage.imageTeaserText)
            </p>
        }


    </div>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12 main-content" id="main-content">
                    <div class="row">
                        <div class="col-lg-12">
                            @CurrentPage.GetGridHtml("inovoGrid")
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

Here's an example on plunkr使用引导列保持元素在标题的两侧对齐。 Bootstrap根据12列对齐其网格。我只是通过col-sm-x添加了对小密度屏幕的支持，你应该尝试其他密度。

建议如何在横幅中制作网格

1 个答案: