背景:
我正在尝试根据 Bootstrap 管理面板示例创建一个可折叠 侧边栏导航菜单... https://v4-alpha.getbootstrap.com/examples/dashboard/
问题:
当管理栏处于折叠模式时，会显示一个小图标栏。我将 margin-left: 50px 添加到主要内容，以便左侧栏有空间，但随后它将我的主要内容推到屏幕右侧。
这是我的问题的截图:
我目前拥有的:
我的标记
<!-- top navigation -->
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
<button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Dashboard</a>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">
Teach
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Config
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" placeholder="Search" type="text">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- end top navigation -->
<div class="container-fluid">
<div class="row">
<!-- sidebar navigation -->
<nav id="sidebar" class="col-sm-3 col-md-2 hidden-xs-down bg-faded sidebar">
<div class="sidebar-header">
<a id="toggleSidebar" href="#">
<i class="fa fa-bars" aria-hidden="true"></i>
</a>
</div>
<div class="sidebar-section">
<li class="nav-item">
<a class="nav-link active" href="#">
<span><i class="fa fa-tachometer" aria-hidden="true"></i></span>
<span>Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span><i class="fa fa-shopping-basket" aria-hidden="true"></i></span>
<span>Bookings</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span><i class="fa fa-credit-card" aria-hidden="true"></i></span>
<span>Payments</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span><i class="fa fa-database" aria-hidden="true"></i></span>
<span>Classes</span>
</a>
</li>
</div>
<div class="sidebar-section">
<li class="nav-item">
<a class="nav-link" href="#">
<span><i class="fa fa-certificate" aria-hidden="true"></i></span>
<span>Courses</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span><i class="fa fa-book" aria-hidden="true"></i></span>
<span>Curriculum</span>
</a>
</li>
</div>
<div class="sidebar-section">
<li class="nav-item">
<a class="nav-link" href="#">
<span><i class="fa fa-users" aria-hidden="true"></i></span>
<span>Groups</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span><i class="fa fa-user" aria-hidden="true"></i></span>
<span>Students</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span><i class="fa fa-graduation-cap" aria-hidden="true"></i></span>
<span>Teachers</span>
</a>
</li>
</div>
<div class="sidebar-section">
<li class="nav-item">
<a class="nav-link" href="#">
<span><i class="fa fa-tachometer" aria-hidden="true"></i></span>
<span>Marketing</span>
</a>
</li>
</div>
</nav>
<!-- end sidebar navigation -->
<!-- main content -->
<main id="mainContent" class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3">
<h1>Dashboard</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
<!-- end main content -->
</div>
</div>
我的CSS
/*bootstrap style*/
body {
padding-top: 50px;
}
.sidebar {
border-right: 1px solid #444444;
background: #353C3E;
bottom: 0;
left: 0;
overflow-x: hidden;
overflow-y: auto;
padding-right: 0px;
padding-left: 0px;
position: fixed;
top: 51px;
z-index: 1000;
}
/*sidebar button*/
#toggleSidebar {
display: block;
padding: 10px;
}
#toggleSidebar i {
color: white;
}
.sidebar-header {
}
.sidebar-header a {
text-align: right;
}
.sidebar-section {
padding-bottom: 30px;
border-top: 1px solid #444444;
list-style: outside none none;
}
.sidebar-section .nav-item {
border-bottom: 1px solid #444444;
}
.sidebar-section i {
color: #aaaaaa;
margin-right: 20px;
}
.sidebar-section a {
color: #ffffff;
background: #292b2c;
}
.sidebar-section a:hover {
color: #ffffff;
background: #777777;
}
.sidebar .active {
background: #999999;
border-left: 10px solid #ffffff;
}
.sidebar .active i {
color: white;
}
/*when collapsed*/
.sidebar-smaller {
overflow-y: hidden;
}
.sidebar-smaller div li a span:nth-child(2) {
display: none;
}
.sidebar-smaller i {
color: #aaaaaa;
margin-right: 0px;
text-align: center !important;
}
.sidebar-smaller .sidebar-header a {
text-align: center;
}
.sidebar-smaller .active {
color: #aaaaaa;
border-left: none;
}
.content-wider {
margin-left:54px;
}
我的 jQuery 切换代码
$(function(){
// cache the dom
$sidebar = $('#sidebar');
$toggleSidebar = $('#toggleSidebar');
$mainContent = $('#mainContent');
toggled = false;
$toggleSidebar.click(function(){
if (toggled === false) {
// shrink the sidebar
$sidebar.addClass('sidebar-smaller');
$sidebar.removeClass('col-sm-3 col-md-2');
$mainContent.addClass('content-wider col-12');
$mainContent.removeClass('col-sm-9 offset-sm-3 col-md-10 offset-md-2');
toggled = true;
} else {
// expand the sidebar
$sidebar.addClass('col-sm-3 col-md-2');
$sidebar.removeClass('sidebar-smaller');
$mainContent.addClass('col-sm-9 offset-sm-3 col-md-10 offset-md-2');
$mainContent.removeClass('content-wider col-12');
toggled = false;
}
// remove the class col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3
// add the class col-sm-12 col-md-12 pt-3
});
});
最佳答案
如果您在导航和主要元素上使用正确的 col-- 类，则无需指定内容的边距。它们的行为与网格完全一样。
我认为您也不需要偏移量。
关于html - 向 Bootstrap 列添加小的左边距时防止 y 溢出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42321536/