我可以扩展主要内容区域的网格吗?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了我可以扩展主要内容区域的网格吗?相关的知识,希望对你有一定的参考价值。

我正在尝试通过添加可折叠的导航栏使我的仪表板应用程序更具动态性。导航器应仅调整图标大小,主区域应扩展。但是从现在开始我有点坚持如何扩展它。

该项目基于php Laravel框架5.6。

我尝试过使用网格列的不同设置。

<div class="container-fluid" id="wrapper">
    <div class="row">
        @include("test.components.sidenav")
        <main class="col-xs-12 col-sm-8 col-lg-9 col-xl-10 pt-3 pl-4 ml-auto">
            <div class="container-fluid" id="expandable">
                <nav class="sidebar col-xs-12 col-sm-4 col-lg-3 col-xl-2" id="collapseId">
                    <h1 class="site-title">
                        <a href="{{ route('home') }}">
                            <em class="fab fa-accessible-icon"></em>
                            <span>Ready4It</span>
                        </a>
                    </h1>
                    <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">
                        <em class="fas fa-bars"></em>
                    </a>
                    <ul class="nav nav-pills flex-column sidebar-nav">
                        <li class="nav-item">
                            <a class="nav-link active" href="">
                                <em class="fas fa-home"></em>
                                <span>Dashboard</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="">
                                <em class="fas fas fa-ticket-alt nav-bar-icon"></em>
                                <span>Ticket overzicht</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="">
                                <em class="fas fa-chart-line"></em>
                                <span>Statistieken</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="">
                                <em class="fas fa-envelope"></em>
                                <span>Mail monitoring</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="">
                                <em class="fas fa-clock"></em>
                                <span>Uren invoer</span>
                            </a>
                        </li>
                    </ul>
                    <a href="#" class="logout-button" id="logout-button">
                        <em class="fa fa-power-off"></em>
                        <span>Logout</span>
                    </a>
                </nav>
                <section class="row">
                    <div class="col-sm-12">
                        <div class="row">
                            @yield("content")
                        </div>
                    </div>
                </section>
            </div>
        </main>
    </div>
</div>

<script>
    /* This script is for the mobile navbar collapse */
    $("#menu-toggle").click(function (e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });

    $("#menu-collapse").click(function (e) {
        e.preventDefault();
        $("#collapseId").toggleClass("icons-only");
        $("#logout-button").toggleClass("logout-button").toggleClass("logout-button-collapsed")
    })
</script>

导航器应仅调整图标大小,主区域应扩展。

答案

试试这个,在类图标中添加固定宽度 - 如果需要,还可以调整变换转换

.icons-only {
 width: some-width;
}

并且还要确保为主要部分添加了与margin-left相同的宽度(仅当将仅图标类添加到nav时才应用此选项)

以上是关于我可以扩展主要内容区域的网格吗?的主要内容,如果未能解决你的问题,请参考以下文章

网格布局与侧边栏重叠

如何使用 css 网格使主要内容 div 随内容扩展?

如何在扩展另一个文件的 django 模板中使用带有动态内容的 html 块片段?

CSS网格布局调整内容

在片段着色器中丢失纹理定义

有人可以在快速数组中给出“如果不存在则追加”方法的片段吗?