laravel - 我可以扩展主要内容区域的网格吗?
问题描述
我正在尝试通过添加可折叠的导航栏来使我的仪表板应用程序更加动态。导航应该调整为只有图标,并且主要区域应该扩大。但我有点坚持从现在开始如何扩展它。
该项目基于 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;
}
并确保您为 main 部分添加了与 margin-left 相同的宽度(仅当仅图标类添加到 nav 时才应用此宽度)
推荐阅读
- performance - 如何对拥有大量用户的 PHP 网站进行负载测试?
- python-3.x - ERR_NAME_NOT_RESOLVED:Angular pod 未与 Kubernetes 中的 python 后端通信
- python - 格式化为 json 的 uWSGI 启动日志
- vb.net - 将窗体的所有者设置为控件,而不是窗体
- excel - Excel 结构化引用过滤表并生成列表
- javascript - 如何在 jQuery 中使用 array_key_exists() 和 ksort()?
- python - Django:通过 SQL 过滤,而不是 Python
- c# - 如何检查字符串是否是有效的子域
- javascript - JavaScript - 将用户输入文本字段添加到 th/td 元素
- r - 有一个 R 库可以在地图上创建网格吗?