html - 如何使这个导航栏全宽？

问题描述

我正在使用 Bootstrap 4 创建一个带有侧边菜单和顶部导航栏的布局。我希望侧边菜单从上到下延伸，顶部导航栏从侧边菜单延伸到屏幕右侧。我怎样才能做到这一点？这是我的html和css。

html,
body {
    background-color: #f5f5f5;
}

body {
    font-family: 'Raleway', Arial, sans-serif;
    color: rgba(42,49,66,.7);
    font-size: 14px;
}

/* Side menu area */
.navbar{
    padding: 15px 10px;
    background: #fff;
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}

.navbar-btn{
    box-shadow: none;
    outline: none!important;
    border: none;
}

.line{
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
}

.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}
#sidebar {
    min-width: 250px;
    max-width: 250px;
    background: #1c2027;
    color: #fff;
    transition: all 0.3s;

}
#sidebar.active{
    margin-left: -250px;
}

#sidebar .sidebar-header{
    padding: 20px;
    background: #1c2027;
    border-bottom: 1px solid #47748b;
}
#sidebar ul.components{
    padding: 20px 0px;
    border-bottom: 1px solid #47748b;
}

#sidebar ul p{
    padding: 10px;
    font-size: 1.1em;
    display: block;
}

#sidebar ul li a{
    padding: 10px;
    font-size: 1.1em;
    display: block;
    color: #9ea9b9;
}
#sidebar ul li a:hover {
    color: #9ea9b9;
    background: #2b313c;
    text-decoration: none;
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
    color: #9ea9b9;
    background: #1c2027;
    text-decoration: none;
}
a[data-toggle="collapse"] {
    position: relative;
}
.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #242932;
}

#content {
    width: 100%;
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
}

@media(maz-width:768px){
    #sidebar{margin-left: -250px;}
    #sidebar.active{
        margin-left: 0px;
    }
    #sidebarCollapse span{
        display: none;
    }
}

<div class="wrapper">
    <nav id="sidebar">
        <div class="sidebar-header">
            <h3>BOOTSTRAP SIDEBAR</h3>
        </div>


        <ul class="list-unstyled components">
            <li class="active">
                <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"><span class="mdi mdi-view-dashboard"></span> Home</a>
                <ul class="collapse list-unstyled" id="homeSubmenu">
                    <li>
                        <a href="#">home1</a>
                    </li>
                    <li>
                        <a href="#">home2</a>
                    </li>
                    <li>
                        <a href="#">home3</a>
                    </li>
                </ul> 
            </li>

            <li>
                <a href="#">About</a>
            </li>
            <li>
                <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Page</a>
                <ul class="collapse list-unstyled" id="pageSubmenu">
                    <li>
                        <a href="#">page1</a>
                    </li>
                    <li>
                        <a href="#">page2</a>
                    </li>
                    <li>
                        <a href="#">page3</a>
                    </li>
                </ul> 
            </li>
            <li>
                <a href="#">Services</a>
            </li>
            <li>
                <a href="#">Contact Us</a>
            </li>
        </ul>

    </nav>

    <div class="content">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">

            <button type="button" id="sidebarCollapse" class="btn btn-info">
                <span class="mdi mdi-menu"></span>
            </button>

            <!--<a class="navbar-brand" href="#">Navbar</a> -->
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Features</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Pricing</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Disabled</a>
                </li>
                </ul>
            </div>
        </nav>

   <footer>
       <p>Copyright</p>
   </footer>

    </div>

</div>

标签： htmlcsstwitter-bootstrap

html - 如何使这个导航栏全宽？

问题描述

解决方案

推荐阅读