Question

我试图制作一个在调整大小时不会崩溃的页面，但只是水平缩放以适应。我想出了如何防止侧边栏崩溃（通过删除@media）但现在当在某个点调整大小时主要内容仍然向左折叠，导致一些内容隐藏在侧边栏后面。我该如何防止这种情况发生？我假设必须编写一些内容来覆盖默认样式。

这是我的HTML：

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-2 sidebar">
                <ul class="nav nav-sidebar">
                    <li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">Reports</a></li>
                    <li><a href="#">Analytics</a></li>
                    <li><a href="#">Export</a></li>
                </ul>
            </div>
            <div class="col-md-10 col-md-offset-2 main">
                <h1 class="page-header">Dashboard</h1>
                <h2 class="sub-header">Section title</h2>
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Header</th>
                                <th>Header</th>
                                <th>Header</th>
                                <th>Header</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>

自定义CSS：

.sidebar {
  position: fixed;
    top: 51px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #f5f5f5;
    border-right: 1px solid #eee;
}
.nav-sidebar {
  margin-right: -21px; /* 20px padding + 1px border */
  margin-bottom: 20px;
  margin-left: -20px;
}
.nav-sidebar > li > a {
  padding-right: 20px;
  padding-left: 20px;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
  color: #fff;
  background-color: #428bca;
}

.main {
  padding-right: 40px;
  padding-left: 40px;
  padding-top: 10px;
  display: block;
}

.main .page-header {
  margin-top: 0;
}

提前致谢。

Answer 1

＆＃13;

.sidebar {
  /* position: fixed; */
    top: 51px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #f5f5f5;
    /* border-right: 1px solid #eee; */
}
.nav-sidebar {
  /* margin-right: -21px; */
	/* 20px padding + 1px border */
  /* margin-bottom: 20px; */
  /* margin-left: -20px; */
}
.nav-sidebar > li > a {
  /* padding-right: 20px;
  padding-left: 20px; */
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
  color: #fff;
  background-color: #428bca;
}

.main {
  /* padding-right: 40px; */
  /* padding-left: 40px; */
  /* padding-top: 10px; */
  /* display: block; */
}

.main .page-header {
  /* margin-top: 0; */
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
        <div class="row">
			<!-- 	<div class='col-xs-12'> -->
				
				
            <div class="col-xs-2 sidebar">
                <ul class="nav nav-sidebar">
                    <li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">Reports</a></li>
                    <li><a href="#">Analytics</a></li>
                    <li><a href="#">Export</a></li>
                </ul>
            </div>
            <div class="col-xs-10 main">
                <h1 class="page-header">Dashboard</h1>
                <h2 class="sub-header">Section title</h2>
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Header</th>
                                <th>Header</th>
                                <th>Header</th>
                                <th>Header</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
						<!-- </div> -->
        </div>
    </div>

＆＃13;

这是一个工作原型，更改只是将侧边栏位置从固定位置移除。

/* position: fixed; */

Bootstrap将负责定位到网格中。 DEMO

Bootstrap：如何在调整页面大小时防止侧边栏和主div崩溃？

1 个答案: