我已经组装了一支sidenav手风琴。问题在于，当侧面滚动时，内容会在sidenav之上和之下。如果可能的话，我会把内容“推”到一边说，但仍然可以看到它。
我尝试在页面上使用溢出和显示属性以及sidenav，但是这些属性似乎或多或少地改变了内容相对于sidenav开始的位置，但同样的问题仍然存在。我也试图弄乱边距和填充，但这也没有用。任何人都知道可能会发生什么，或者这是否可能？
我附上了一个plunker，我试图尽可能地删除代码，同时仍能显示出问题所在。您可能需要让视图屏幕更大才能看到它（我需要解决的另一个错误，但还没有真正研究过它）。
这是我的标记
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<nav class="navbar navbar-s1 navbar-side left" role="navigation">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul id="side" class="nav navbar-nav side-nav">
<li><a href=""><i class="fa fa-dashboard"></i> Forms</a></li>
<li class="panel">
<a class="accordion-toggle" data-target="#customerSupport" data-toggle="collapse" data-parent="#side"> Customer Support <i class="fa fa-caret-down"></i></a>
<ul id="customerSupport" class="collapse nav">
<li>
<a class="sublink" href=""> <i class="fa fa-angle-double-right"></i> Reconciliation</a>
</li>
<!-----<li class="panel">
<a class="accordion-toggle" data-target="#affliate" data-toggle="collapse">Affliate <i class="fa fa-caret-down"></i></a>
<ul id="affliate" class="collapse nav">
<li><a class="sublink" href=""> <i class="fa fa-angle-double-right"></i> Categories</a></li>
<li><a class="sublink" href=""> <i class="fa fa-angle-double-right"></i> Products</a></li>
</ul>
</li>-->
</ul>
</li>
<li class="panel">
<a class="accordion-toggle" data-target="#iceTravel" data-toggle="collapse" data-parent="#side"> Menu <i class="fa fa-caret-down"></i></a>
<ul id="iceTravel" class="collapse nav">
<li>
<a class="sublink" href=""> <i class="fa fa-angle-double-right"></i> Reconciliation</a>
</li>
<li>
<a class="sublink" href=""> <i class="fa fa-angle-double-right"></i> Spiff Tracker</a>
</li>
</ul>
</li>
<li class="panel">
<a class="accordion-toggle" data-target="#lifestyles" data-toggle="collapse" data-parent="#side"> Menu <i class="fa fa-caret-down"></i></a>
<ul id="lifestyles" class="collapse nav">
<li>
<a class="sublink" href=""> <i class="fa fa-angle-double-right"></i> Reconciliation</a>
</li>
</ul>
</li>
<li class="panel">
<a class="accordion-toggle" data-target="#marriot" data-toggle="collapse" data-parent="#side"> Menu <i class="fa fa-caret-down"></i></a>
<ul id="marriot" class="collapse nav">
<li>
<a class="sublink" href=""> <i class="fa fa-angle-double-right"></i> Reconciliation</a>
</li>
</ul>
</li>
<li class="panel">
<a class="accordion-toggle" data-target="#rciTravel" data-toggle="collapse" data-parent="#side"> Menu <i class="fa fa-caret-down"></i></a>
<ul id="rciTravel" class="collapse nav">
<li>
<a class="sublink" href=""> <i class="fa fa-angle-double-right"></i> Adjustment</a>
</li>
<li>
<a class="sublink" href=""> <i class="fa fa-angle-double-right"></i> Cancellation</a>
</li>
<li>
<a class="sublink" href=""> <i class="fa fa-angle-double-right"></i> Manual Push</a>
</li>
<li>
<a class="sublink" href=""> <i class="fa fa-angle-double-right"></i> Reconciliation</a>
</li>
<li class="divider"></li>
<li>
<a class="sublink" href=""> <i class="fa fa-angle-double-right"></i> Escalations</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="row">
<div class="col-lg-4" id="memberInfo">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Member Information</h3>
</div>
<div class="panel-body">
<div class="input-group">
<input type="text" class="form-control input-sm" placeholder="Member ID" />
<span class="input-group-btn" style="width:0px;"></span>
<input type="text" class="form-control input-sm" placeholder="Brand ID" />
</div>
<div class="input-group">
<input type="text" class="form-control input-sm" placeholder="Member's First Name" />
<span class="input-group-btn" style="width:0px;"></span>
<input type="text" class="form-control input-sm" placeholder="Member's Last Name" />
</div>
</div>
</div>
</div>
</div>
<div id="reservationInfo">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Reservation Information</h3>
</div>
<div class="panel-body">
<div class="container">
<form class="col-sm-6" role="form">
<div id="paymentInfo" class="col-sm-12">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Payment Information</h3>
</div>
<div class="panel-body">
<div class="container">
<form role="form">
<div class="form-inline" style="margin-left: 114px">
<div class="form-group-sm">
<div class="btn-group-sm form-inline">
<input type="text" id="rg-from" name="rg-from" value="" class="form-control">
<input type="text" id="rg-from" name="rg-from" value="" class="form-control">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="input-group-sm">
<div class="form-group-sm">
<label for="comment" style="width: auto">Reservation Names:</label>
<textarea class="form-control" rows="2" id="comment"></textarea>
</div>
<div class="form-group">
<label for="comment" style="width: auto">Witness Recording ID:</label>
<textarea class="form-control" rows="2" id="comment"></textarea>
</div>
<div class="form-group">
<label for="comment" style="width: auto">Booking Description/Notes:</label>
<textarea class="form-control" rows="2" id="comment"></textarea>
</div>
</div>
</div>
</div>
</div>
<legend>Legend</legend>
<div class="form-group">
<button type="submit" class="btn btn-default col-xs-8 col-xs-offset-4">Submit Button</button>
</div>
</body>
</html>
我的CSS
body {
padding-top: 50px;
padding-bottom: 20px;
margin: 0px;
padding-left: 200px;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Override the default bootstrap behavior where horizontal description lists
will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
white-space: normal;
}
/*----------SideNav------------*/
.circle-tile {
margin-bottom: 15px;
text-align: center;
}
.circle-tile-heading {
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 100%;
color: #FFFFFF;
height: 80px;
margin: 0 auto -40px;
position: relative;
transition: all 0.3s ease-in-out 0s;
width: 80px;
}
.circle-tile-heading .fa {
line-height: 80px;
}
.circle-tile-content {
padding-top: 50px;
}
.circle-tile-number {
font-size: 26px;
font-weight: 700;
line-height: 1;
padding: 5px 0 15px;
}
.circle-tile-description {
text-transform: uppercase;
}
.circle-tile-footer {
background-color: rgba(0, 0, 0, 0.1);
color: rgba(255, 255, 255, 0.5);
display: block;
padding: 5px;
transition: all 0.3s ease-in-out 0s;
}
.circle-tile-footer:hover {
background-color: rgba(0, 0, 0, 0.2);
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
}
.circle-tile-heading.dark-blue:hover {
background-color: #2E4154;
}
.circle-tile-heading.green:hover {
background-color: #138F77;
}
.circle-tile-heading.orange:hover {
background-color: #DA8C10;
}
.circle-tile-heading.blue:hover {
background-color: #2473A6;
}
.circle-tile-heading.red:hover {
background-color: #CF4435;
}
.circle-tile-heading.purple:hover {
background-color: #7F3D9B;
}
.tile-img {
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.9);
}
/* Edit Below to Customize Widths > 768px */
@media (min-width:768px) {
.side-nav {
margin-left: -225px;
left: 225px;
width: 225px;
position: fixed;
top: 50px;
height: 100%;
border-radius: 0;
border: none;
}
.side-nav >li .dropdown > ul .dropdown-menu {
min-width: 225px;
margin: 0;
padding: 0;
border: none;
border-radius: 0;
background-color: transparent;
box-shadow: none;
-webkit-box-shadow: none;
}
.side-nav>li>a {
width: 225px;
}
.navbar-collapse {
padding-left: 15px !important;
padding-right: 15px !important;
}
}
/* New */
.navbar-side .side-nav .panel {
margin: 0px;
padding: 0px;
}
.navbar-side ul.side-nav {
background-color: #2C3E50;
border-bottom: 1px solid #54677A;
font-size: 13px;
margin-bottom: 0;
margin-top: 0;
border-left: 1px solid #54677A;
}
.navbar-side .navbar-nav > li > a:hover { /*-----------------------*/
background-color: #2980B9 !important;
}
.navbar-side .navbar-nav > li > a:focus { /*-----------------------*/
background-color: #34495E !important;
}
.navbar-side .navbar-nav > li > a:active {
background-color: darkblue !important; /*-----------------------*/
color: #000;
outline: medium none;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1)
}
.navbar-side .navbar-nav > li > a {
background-color: darkcyan;
outline: medium none;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); /*-----------------------*/
}
.navbar-side .navbar-nav .sublink {
color: #000 ;
}
.navbar-side .side-nav li, .navbar-side .side-nav li.panel {
border-bottom: 1px solid #142638;
border-top: 1px solid #54677A;
border-left: 1px solid #54677A;
border-right: 1px solid #54677A;
}
.navbar-side .side-nav li.panel ul li {
border-bottom: medium none;
border-top: medium none;
}
/* Top Menu Color */
.navbar-s1 .navbar-text {
color: #999999;
}
.navbar-s1 .navbar-nav > li > a {
color: #999999;
}
.navbar-s1 .navbar-nav > li > a:hover,
.navbar-s1 .navbar-nav > li > a:focus {
color: #ffffff;
background-color: transparent;
}
.navbar-s1 .navbar-nav > .active > a,
.navbar-s1 .navbar-nav > .active > a:hover,
.navbar-s1 .navbar-nav > .active > a:focus {
color: #ffffff;
background-color: #080808;
}
.navbar-s1 .navbar-nav > .disabled > a,
.navbar-s1 .navbar-nav > .disabled > a:hover,
.navbar-s1 .navbar-nav > .disabled > a:focus {
color: #444444;
background-color: transparent;
}
.navbar-s1 .navbar-toggle {
border-color: #333333;
}
.navbar-s1 .navbar-toggle:hover,
.navbar-s1 .navbar-toggle:focus {
background-color: #333333;
}
.navbar-s1 .navbar-toggle .icon-bar {
background-color: #ffffff;
}
.navbar-s1 .navbar-collapse,
.navbar-s1 .navbar-form {
border-color: #101010;
}
.navbar-s1 .navbar-nav > .open > a,
.navbar-s1 .navbar-nav > .open > a:hover,
.navbar-s1 .navbar-nav > .open > a:focus {
color: #ffffff;
background-color: #080808;
}
@media (max-width: 767px) {
.navbar-s1 .navbar-nav .open .dropdown-menu > .dropdown-header {
border-color: #080808;
}
.navbar-s1 .navbar-nav .open .dropdown-menu .divider {
background-color: #080808;
}
.navbar-s1 .navbar-nav .open .dropdown-menu > li > a {
color: #999999;
}
.navbar-s1 .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-s1 .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ffffff;
background-color: transparent;
}
.navbar-s1 .navbar-nav .open .dropdown-menu > .active > a,
.navbar-s1 .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-s1 .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffffff;
background-color: #080808;
}
.navbar-s1 .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar-s1 .navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar-s1 .navbar-nav .open .dropdown-menu > .disabled > a:focus {
color: #444444;
background-color: transparent;
}
}
.navbar-s1 .navbar-link {
color: #999999;
}
.navbar-s1 .navbar-link:hover {
color: #ffffff;
}
.divider {
height: 1px;
width:100%;
display:block; /* for use on default inline elements like span */
margin: 0px 0;
background-color: #e5e5e5;}
/*--------Custom Classes----------*/
#memberInfo {
padding-top: 20px;
}
.calBoxes input[type=text] {
display: inline-block;
vertical-align: middle;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: none;
}
我确实将我的sidenav从我发现的this移开了。如果您需要任何澄清或其他信息，请告诉我们！谢谢！
根据建议我添加了col-sm-x属性，但现在导航栏显示在页面顶部，而下面的内容显示在我想要它们的位置。我还对我的CSS进行了更改以适应，如下所示。
.side-nav {
margin-left: -25px;
left: 225px;
width: 225px;
position: static;
top: 50px;
height: 100%;
border-radius: 0;
border: none;
overflow: auto;
}
当导航栏离开页面时，我更改了左边距和溢出属性。我也更新了plunker。
答案 0 :(得分：0)
首先将页面包装在SIGFPE中，以便为行提供正确的对齐和填充。然后将sidenav和content包装在container-fluid中，并使用Bootstrap的网格列系统12，将列数分配给各自的元素。例如，侧边栏为row，内容为col-md-2。