如何使导航栏全角？

Posted 2023-01-12

我正在使用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)
    #sidebarmargin-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>

答案

您是否已为导航栏尝试过width: 100%;，为边栏尝试了height: 100%;？