Question

我想修改Microsoft .net Core入门剃须刀页面模板，使其类似于以下内容：https://getbootstrap.com/docs/4.1/about/overview/

我一直试图根据上面链接中的源html修改布局页面，但运气不佳。现在，我的侧面导航和搜索框位于渲染的内容的顶部，而不是在其旁边渲染的内容。我该如何在不使用默认引导程序类以外的任何类的情况下完成此操作？

我替换了以下部分：

<div class="container body-content">
                    @RenderBody()
                    <hr />
                    <footer>
                        <p>&copy; 2018 - VMS</p>
                    </footer>
                </div>

与此：

 <div class="container-fluid">
                    <div class="row flex-xl-nowrap">
                        <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
                            <form class="bd-search d-flex align-items-center">
                                <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
                                <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22" /></svg>
                                </button>
                            </form>

                            <nav class="collapse bd-links" id="bd-docs-nav">
                                <div class="bd-toc-item">
                                    <a class="bd-toc-link" href="/docs/4.0/getting-started/introduction/">
                                        Getting started
                                    </a>

                                    <ul class="nav bd-sidenav">
                                        <li>
                                            <a href="/docs/4.0/getting-started/introduction/">
                                                Introduction
                                            </a>
                                        </li>

                                    </ul>
                                </div><div class="bd-toc-item">
                                    <a class="bd-toc-link" href="/docs/4.0/content/reboot/">
                                        Content
                                    </a>

                                    <ul class="nav bd-sidenav">
                                        <li>
                                            <a href="/docs/4.0/content/reboot/">
                                                Reboot
                                            </a>
                                        </li>

                                    </ul>
                                </div>
                            </nav>
                            <div class="container body-content">
                                @RenderBody()
                                <hr />
                                <footer>
                                    <p>&copy; 2018 - VMS</p>
                                </footer>
                            </div>
                        </div>
                    </div>

Answer 1

将html更改为：

<div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 col-sm-12 col-xs-12 bd-sidebar">
        <form class="bd-search d-flex align-items-center">
            <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
            <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
                <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22" /></svg>
            </button>
        </form>

        <nav class="collapse bd-links" id="bd-docs-nav">
            <div class="bd-toc-item">
                <a class="bd-toc-link" href="/docs/4.0/getting-started/introduction/">
                    Getting started
                </a>

                <ul class="nav bd-sidenav">
                    <li>
                        <a href="/docs/4.0/getting-started/introduction/">
                            Introduction
                        </a>
                    </li>

                </ul>
            </div><div class="bd-toc-item">
                <a class="bd-toc-link" href="/docs/4.0/content/reboot/">
                    Content
                </a>

                <ul class="nav bd-sidenav">
                    <li>
                        <a href="/docs/4.0/content/reboot/">
                            Reboot
                        </a>
                    </li>

                </ul>
            </div>
        </nav>

    </div>
    <div class="container body-content">
            @RenderBody()
            <hr />
            <footer>
                <p>&copy; 2018 - VMS</p>
            </footer>
    </div>
</div>

请注意，bd-content是bd-sidebar的兄弟姐妹，而不是孩子。然后在您的col-sm-12 col-xs-12中添加bd-sidebar类。

由于您不需要额外的CSS类，因此要正确显示边栏，我们仍然需要针对不同设备的CSS样式。

对于小尺寸或超小尺寸的屏幕，请使用col-sm-12，col-xs-12进行显示

.bd-sidebar {
    z-index: 1000;
    order: 0;
    border-bottom: 1px solid rgba(0,0,0,.1);
}

form.bd-search {
    display: flex;
}
form.bd-search >span.algolia-autocomplete{
    flex: 0 1 90%;
}
form.bd-search >button.bd-search-docs-toggle{
    flex: 0 1 8%;
}

对于中型屏幕（或更大尺寸），在左侧显示侧边栏

@media (min-width: 768px){
    .flex-xl-nowrap{
        display: flex;
    }
    .bd-sidebar {
        flex: 0 1 320px;
        position: -webkit-sticky;
        position: sticky;
        top: 4rem;
        z-index: 1000;
        height: calc(100vh - 4rem);
        border-right: 1px solid rgba(0,0,0,.1);
    }
}

.Net Core入门模板的引导程序布局类似于引导程序首页

1 个答案: