我正在尝试创建一个左侧有可折叠侧边栏的页面，内容占据页面的其余部分。在我的内容区域中，我想要一个导航栏在上面，其余的内容在下面。
目前，我正在使用container-fluid类来确保导航栏调整大小。当我有一个封装在<p>标签中的常规段落时，导航栏和段落跨越页面的整个宽度。但是，当我使用row和col的时候，内容似乎只占用了页面而没有走到边缘。
这是我的HTML代码：
<div id="content">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" id="sidebarCollapse" class="btn navbar-btn">
<i class="glyphicon glyphicon-menu-hamburger"></i>
<span>Toggle Sidebar</span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="/account-settings">username</a></li>
<li><a href="/logout">Logout</a></li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-md-3">
<!-- I have a few divs here -->
</div>
<div class="col-md-9">
<!-- I have a fre more divs here -->
</div>
</div><!-- row -->
</div>
我目前正在使用Bootstrap 3（3.3.7）并跟随this tutorial.我知道在Stack Overflow上还有一些其他问题，但是没有任何解决方案可以解决我的问题
感谢您的帮助。
答案 0 :(得分：1)
我认为你期待这一点。如果不是您的期望，请在此处添加fiddler代码段，我将更新代码。
$(document).ready(function () {
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
$('#sidebarCollapse').on('click', function () {
$('#sidebar, #content').toggleClass('active');
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://bootstrapious.com/tutorial/sidebar/style2.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css"/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<p>Dummy Heading</p>
<li class="active">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false">Home</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li><a href="#">Home 1</a></li>
<li><a href="#">Home 2</a></li>
<li><a href="#">Home 3</a></li>
</ul>
</li>
<li>
<a href="#">About</a>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">Pages</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
<ul class="list-unstyled CTAs">
<li><a href="#" class="download">Download source</a></li>
<li><a href="#" class="article">Back to article</a></li>
</ul>
</nav>
<!-- Page Content Holder -->
<div id="content" class="">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="glyphicon glyphicon-align-left"></i>
<span>Toggle Sidebar</span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Page</a></li>
<li><a href="#">Page</a></li>
<li><a href="#">Page</a></li>
<li><a href="#">Page</a></li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-md-3">
<div style="background-color: #324D5C; padding: 25px; border-radius: 5px;">
<p><b style="color: #fff;">Upcomming</b></p>
<h1 style="color: #46B29D; text-align: right;">50</h1>
</div>
<br>
<div style="background-color: #46B29D; padding: 25px; border-radius: 5px;">
<p><b style="color: #fff;">Total Created</b></p>
<h1 style="color: #F0CA4D; text-align: right;">120</h1>
</div>
<br>
<div style="background-color: #F0CA4D; padding: 25px; border-radius: 5px;">
<p><b style="color: #E37B40;">Avgerage Value</b></p>
<h1 style="color: #324D5C; text-align: right;">$400</h1>
</div>
<br>
</div> <!-- col-md-3 -->
<div class="col-md-9">
<div style="background-color: #46B29D; padding: 25px; border-radius: 5px;">
<p><b style="color: #fff;">Upcomming</b></p>
<h1 style="color: #46B29D; text-align: right;">50</h1>
</div>
<br>
<div style="background-color: #46B29D; padding: 25px; border-radius: 5px; ">
<p><b style="color: #fff;">Total Created</b></p>
<h1 style="color: #F0CA4D; text-align: right;">120</h1>
</div>
<br>
<div style="background-color: #F0CA4D; padding: 25px; border-radius: 5px;">
<p><b style="color: #E37B40;">Avgerage Value</b></p>
<h1 style="color: #324D5C; text-align: right;">$400</h1>
</div>
<br>
</div> <!-- col-md-9 -->
</div><!-- row -->
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
</body>
</html>