php Blade 并排对齐扩展布局
问题描述 投票：0回答：1
我正在尝试构建一个响应式仪表板，使用侧边栏在右侧进行导航，我将侧边栏构建为布局，并通过使用 Bootstrap 4 将页面划分为网格来将其扩展在仪表板页面中 但我不断得到的结果正如你在屏幕截图中看到的那样，我不确定为什么 div 会这样。
侧边栏布局的源代码
HTML
<div class="wrapper">
<input type="checkbox" id="btn" hidden />
<label for="btn" class="menu-btn">
<i class="fas fa-bars"></i>
<i class="fas fa-times"></i>
</label>
<nav id="sidebar">
<div class="title">Side Menu</div>
<ul class="list-items">
<li>
<a href="#"><i class="fas fa-home"></i>Home</a>
</li>
<li>
<a href="#"><i class="fas fa-sliders-h"></i>Clients</a>
</li>
<li>
<a href="#"><i class="fas fa-address-book"></i>Services</a>
</li>
<li>
<a href="#"><i class="fas fa-cog"></i>Settings</a>
</li>
<li>
<a href="#"><i class="fas fa-stream"></i>Features</a>
</li>
<li>
<a href="#"><i class="fas fa-user"></i>About us</a>
</li>
<li>
<a href="#"><i class="fas fa-globe-asia"></i>Languages</a>
</li>
<li>
<a href="#"><i class="fas fa-envelope"></i>Contact us</a>
</li>
</ul>
</nav>
</div>
CSS
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.wrapper{
height: 100%;
width: 45%;
position: relative;
}
.wrapper .menu-btn{
position: absolute;
left: 20px;
top: 10px;
background: #4a4a4a;
color: #fff;
height: 45px;
width: 45px;
z-index: 9999;
border: 1px solid #333;
border-radius: 5px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
#btn:checked ~ .menu-btn{
left: 247px;
}
.wrapper .menu-btn i{
position: absolute;
transform: none;
font-size: 23px;
transition: all 0.3s ease;
}
.wrapper .menu-btn i.fa-times{
opacity: 0;
}
#btn:checked ~ .menu-btn i.fa-times{
opacity: 1;
transform: rotate(-180deg);
}
#btn:checked ~ .menu-btn i.fa-bars{
opacity: 0;
transform: rotate(180deg);
}
#sidebar{
position: absolute;
background: #404040;
height: 100%;
width: 270px;
overflow: hidden;
left: -270px;
transition: all 0.3s ease;
}
#btn:checked ~ #sidebar{
left: 0;
}
#sidebar .title{
line-height: 65px;
text-align: center;
background: #333;
font-size: 25px;
font-weight: 600;
color: #f2f2f2;
border-bottom: 1px solid #222;
}
#sidebar .list-items{
position: relative;
background: #404040;
width: 100%;
height: 100%;
list-style: none;
/*text-align: justify;*/
/*line-height: 0;*/
}
#sidebar .list-items li{
padding-left: 40px;
line-height: 50px;
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid #333;
transition: all 0.3s ease;
position: relative;
}
#sidebar .list-items li:hover{
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
box-shadow: 0 0 10px 3px #222;
}
#sidebar .list-items li:first-child{
border-top: none;
}
#sidebar .list-items li a{
color: #f2f2f2;
text-decoration: none;
font-size: 18px;
font-weight: 500;
/*height: 100%;*/
width: 100%;
display: block;
}
#sidebar .list-items li a i{
margin-right: 20px;
}
#sidebar .list-items .icons{
width: 100%;
height: 40px;
text-align: center;
position: absolute;
bottom: 100px;
line-height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
#sidebar .list-items .icons a{
height: 100%;
width: 40px;
display: block;
margin: 0 5px;
font-size: 18px;
color: #f2f2f2;
background: #4a4a4a;
border-radius: 5px;
border: 1px solid #383838;
transition: all 0.3s ease;
}
#sidebar .list-items .icons a:hover{
background: #404040;
}
.list-items .icons a:first-child{
margin-left: 0;
}
.content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #202020;
z-index: -1;
width: 100%;
text-align: center;
}
.content .header{
font-size: 45px;
font-weight: 700;
}
.content p{
font-size: 40px;
font-weight: 700;
}
java脚本
document.addEventListener("DOMContentLoaded", function(event) {
const showNavbar = (toggleId, navId, bodyId, headerId) =>{
const toggle = document.getElementById(toggleId),
nav = document.getElementById(navId),
bodypd = document.getElementById(bodyId),
headerpd = document.getElementById(headerId)
// Validate that all variables exist
if(toggle && nav && bodypd && headerpd){
toggle.addEventListener('click', ()=>{
// show navbar
nav.classList.toggle('show')
// change icon
toggle.classList.toggle('bx-x')
// add padding to body
bodypd.classList.toggle('body-pd')
// add padding to header
headerpd.classList.toggle('body-pd')
})
}
}
showNavbar('header-toggle','nav-bar','body-pd','header')
/*===== LINK ACTIVE =====*/
const linkColor = document.querySelectorAll('.nav_link')
function colorLink(){
if(linkColor){
linkColor.forEach(l=> l.classList.remove('active'))
this.classList.add('active')
}
}
linkColor.forEach(l=> l.addEventListener('click', colorLink))
// Your code to run since DOM is loaded and ready
});
对于主仪表板，问题出现在哪里
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>@yield('title')</title>
<link rel="stylesheet" href="{{asset('assets/css/bootstrap.min.css')}}" >
<link href="{{asset('assets/css/registerClient.css')}}" rel="stylesheet">
<link href="{{asset('assets/css/dashboard-navbar.css')}}" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
{{--@yield('layouts.adminNavbar')--}}
{{--inhert the side Navabar for SLP navigation--}}
<div class="container">
<div class="row">
{{-- start of sidebar column--}}
<div class="col-md-6">
@extends('layouts.adminNavbar')
</div> {{-- end of sidebar column--}}
{{-- start of the form column--}}
<div class="col-md-6">
<div class="class container-fluid">
<form action="action_page.php">
<div class="container">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" id="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" id="psw" required>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" id="psw-repeat" required>
<hr>
<p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
<button type="submit" class="registerbtn">Register</button>
</div>
<div class="container signin">
<p>Already have an account? <a href="#">Sign in</a>.</p>
</div>
</form>
</div>{{-- end of register form column --}}
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
我正在尝试使用 Bootstrap Grids 将页面拆分为 2 列 左栏采用 @extended 布局，右页面采用 form 或基于用户所在路线的任何其他页面
1个回答
0
投票
投票
你的问题不太清楚，我想你会想要这样的东西：
如果是这样，这更多的是 bootstrap/html 问题，那么它就是 laravel-blade。这是图片上的示例代码
HTML
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@yield('title')</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
</head>
<body>
<div class="wrapper">
<input type="checkbox" id="btn" hidden />
<label for="btn" class="menu-btn">
<i class="fas fa-bars"></i>
<i class="fas fa-times"></i>
</label>
<nav id="sidebar">
<div class="title">Side Menu</div>
<ul class="list-items">
<!-- Menu items here -->
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</ul>
</nav>
<div class="main-content">
<!-- Main content here -->
<div class="m-auto">
<h1>Main content</h1>
</div>
</div>
</div>
<style>
#sidebar {
position: fixed;
top: 0;
left: -200;
height: 100%;
width: 200px;
/* Adjust the width as needed */
background-color: #f1f1f1;
padding: 20px;
box-sizing: border-box;
transform: translateX(0);
transition: transform 0.3s ease;
}
.wrapper .menu-btn {
position: absolute;
left: 20px;
top: 10px;
background: #4a4a4a;
color: #fff;
height: 45px;
width: 45px;
z-index: 9999;
border: 1px solid #333;
border-radius: 5px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
#btn:checked~#sidebar {
transform: translateX(+100%);
}
#btn:checked~.menu-btn {
left: 200px;
}
#btn:checked~.menu-btn i.fa-times {
opacity: 1;
transform: rotate(-180deg);
}
#btn:checked~.menu-btn i.fa-bars {
opacity: 0;
transform: rotate(180deg);
}
.main-content{
margin-left: 250px;
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>
这只是如何仅通过 CSS 实现此功能的示例之一。如果这是您所需要的，至少在我看来，这样做总是个好主意：
- 您可以使用简单的代码（如本示例中的 HTML/CSS）
- 确定之后就逐步引入laravel Blade的功能
- 将侧边栏放入单独的文件中并包含它
- 根据需要用不同的刀片部件雕刻出主要区域
- 边走边测试
br
最新问题
- Databricks 中的 Redshift 查询比 Redshift 客户端中花费的时间更长
- 为什么定义名称前面的加号会影响封闭函数的结果？
- Tinymce 如何将图片的替代描述字段设为必填？
- 从毫秒转换为日期时间格式
- SD_MCC.remove() 函数在 ESP32CAM 上不起作用
- R stats `aov` 使用所有可用核心而不是仅一个
- Go 中如何区分 nil 错误值
- Apache Ignite 节点经常失败
- 当链接悬停时是否可以撤消颜色变化？
- 如何在 C++ 中有效地将整个数组的属性设置为 0
- java.lang.IllegalStateException：在 Struts 2 中已为此响应调用 getOutputStream()
- Ansible“ansible.builtin.tempfile”不是 Play 的有效属性
- 不同的进程共享一个主线程吗？
- Modelica SemiLinear()
- 删除 ToMany 关系后，在 Objectbox 中保存带有关系的对象时出现错误 404
- Pandas `to_sql` 使用 `if_exists = 'append'` 给出 `Table已经存在` 错误
- 如何使 Django-Q 适用于最新的 python/djang 版本？
- Django：在整个服务器生命周期中都存在的对象
- 如果至少有一个元素是共同的，则进行分组
- Haskell 中 callCC 的意外输出
© www.soinside.com 2019 - 2024. All rights reserved.