PHP 刀片并排对齐扩展布局

Question

我正在尝试构建一个响应式仪表板，使用侧边栏在右侧进行导航，我将侧边栏构建为布局，并通过使用 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 或基于用户所在路线的任何其他页面

Answer 1

你的问题不太清楚，我想你会想要这样的东西：

如果是这样，这更多的是 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

PHP 刀片并排对齐扩展布局

问题描述投票：0回答：1

1个回答

最新问题

PHP 刀片并排对齐扩展布局

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1