如何使这个导航栏全宽？

Question

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

Answer 1

你试过width: 100%; 对于导航栏和height: 100%; 对于侧边栏？