Question

我尝试在基于引导程序的页面上添加侧边栏并在线查看示例并应用它但是我有一个问题是如何在不切换主要内容时告诉侧边栏显示当我切换其显示的侧边栏但是它将我的内容推向了正确的位置。可以找到侧栏模板here。

HTML：

<nav class="navbar navbar-default fixed" role="navigation">
 <div class="container">
  <div class="navbar-header">                                              
    <a href="#menu-toggle" class="navbar-left" id="menu-toggle"><i class="fa fa-bars" aria-hidden="true"></i></a>
     <a class="navbar-brand center" href="#">Logo</a>
  </div>
  <!-- collapse -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <div class="text-right">
   <a href="#" class="btn btn-default navbar-btn btn-raised">Login</a>
   <a href="#" class="btn btn-danger navbar-btn btn-raised">Register</a>
  </div>
  </div>
  </div>
  </nav>
    <div id="wrapper">

        <!-- Sidebar -->
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li><a href="#">Link</a></li>
            </ul>
        </div>
        <!-- /#sidebar-wrapper -->
    <header>
        <img src="http://placehold.it/1369x500" class="img-responsive">
    </header>
</div>

链接以触发侧栏：

<a href="#menu-toggle" class="navbar-left" id="menu-toggle"><i class="fa fa-bars" aria-hidden="true"></i></a>

当侧边栏显示时，<header>内容会被推到右侧并调整大小。我怎么能防止这种情况？当侧边栏显示时，我想保留内容的确切大小。任何帮助将不胜感激。

Answer 1

删除左边距应该可以完成这项工作：

#wrapper {
    padding-left: 0 !important;
}

修复网页的主要内容

1 个答案: