我目前正在开发一个带有导航栏和侧边栏的网页。我的导航栏包含我的页面的类别，即汽车和摩托车。单击后，侧边栏将显示其中包含所选类别的库和参考。但是，每当窗口调整大小时，我的页面都会丢失其格式。侧边栏是固定的，但它可以滚动，看起来它与导航栏断开连接。如何使他们的位置固定？
.navbar-inverse {
background: black;
font-size: 18px;
}
.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>li>a:focus {
color: #ffb143;
}
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
color: white;
font-size: 18px;
}
.navbar-brand {
font-family: 'Lato', sans-serif;
color: grey;
font-size: 20px !important;
margin: 0px;
}
td {
font-weight: normal;
padding-left: 55px;
padding-right: 10px;
padding-bottom: 18px;
text-align: center;
}
th {
font-weight: bold;
padding-left: 65px;
padding-right: 50px;
overflow: hidden;
white-space: nowrap;
text-align: center;
}
table#bod {
width: 100%;
margin-left: 15px;
margin-right: 45%;
}
#add {
margin-left: 10px;
width: 50px;
}
.sidebar {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: black;
overflow-x: hidden;
padding-top: 80px;
margin-top: 45px;
}
/* Style sidebar links */
.sidebar a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 18px;
color: white;
display: block;
}
/* Style links on mouse-over */
.sidebar a:hover {
color: #f1f1f1;
}
/* Style the main content */
.main {
margin-left: 160px;
/* Same as the width of the sidenav */
padding: 0px 10px;
}
/* Add media queries for small screens (when the height of the screen is less than 450px, add a smaller padding and font-size) */
@media screen and (max-height: 450px) {
.sidebar {
padding-top: 15px;
}
.sidebar a {
font-size: 18px;
}
}
红颜莎娜
相关分类