在居中的 Bootstrap 3 网格旁边创建一个固定的侧边栏

Posted 2023-03-05

【中文标题】在居中的 Bootstrap 3 网格旁边创建一个固定的侧边栏

【英文标题】：Creating a fixed sidebar alongside a centered Bootstrap 3 grid

【发布时间】：2013-12-31 17:09:19

【问题描述】：

我想创建一个固定的侧边栏，它存在于在我居中的引导网格之外。尝试执行此操作时我面临的挑战是确定将哪些其他样式应用/覆盖到我的.container，以便在调整屏幕大小时它不会与我的侧边栏重叠。

对于初学者，我只使用 css 框架的网格部分，因此 .container、.row 和 .col-md-12 是从 bootstrap.css 文件本身提取的代码，不是自定义的。另外请记住，我正在使用 Bootstrap 3，所以请不要为 Bootstrap 2 的流体网格解决方案提供建议，这在以前的帖子中经常被问到。

HTML

<div id="left-nav"></div>
<div class="container">
   <div class="row">
      <div class="col-md-12">
         <p>Lorem ipsum dolor sit amet, nunc dictum at.</p>
      </div>
   </div>
</div>

CSS

html, body 
  height: 100%;
  width: 100%;

#left-nav 
  background: #2b2b2b;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 250px;

【问题讨论】：

这是你要找的东西吗：startbootstrap.com/templates/simple-sidebar.html

看起来是这样。非常感谢。

以上链接失效了。

@EjazKarim 固定链接：startbootstrap.com/templates/simple-sidebar

@EjazKarim 我已经复制了 HTML 和 CSS below

【参考方案1】：

As drew_w said，你可以找到good example here。

HTML

<div id="wrapper">
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li class="sidebar-brand"><a href="#">Home</a></li>
            <li><a href="#">Another link</a></li>
            <li><a href="#">Next link</a></li>
            <li><a href="#">Last link</a></li>
        </ul>
    </div>
    <div id="page-content-wrapper">
        <div class="page-content">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <!-- content of page -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

#wrapper 
  padding-left: 250px;
  transition: all 0.4s ease 0s;


#sidebar-wrapper 
  margin-left: -250px;
  left: 250px;
  width: 250px;
  background: #CCC;
  position: fixed;
  height: 100%;
  overflow-y: auto;
  z-index: 1000;
  transition: all 0.4s ease 0s;


#page-content-wrapper 
  width: 100%;


.sidebar-nav 
  position: absolute;
  top: 0;
  width: 250px;
  list-style: none;
  margin: 0;
  padding: 0;


@media (max-width:767px) 

    #wrapper 
      padding-left: 0;
    

    #sidebar-wrapper 
      left: 0;
    

    #wrapper.active 
      position: relative;
      left: 250px;
    

    #wrapper.active #sidebar-wrapper 
      left: 250px;
      width: 250px;
      transition: all 0.4s ease 0s;
    

JSFIDDLE

【讨论】：

如何更改代码以使其保持在右侧？

@masb 我建议尝试将padding-left、margin-left 和left 的所有引用分别更改为padding-right、margin-right 和right

我真正喜欢的是它没有被标记和 css 臃肿。因此，我可以轻松地查看代码并理解它，然后进行必要的更改。

这太棒了！我想看到的唯一调整是在顶部有一个全宽导航栏。那么侧边栏只会从顶部导航栏下方开始......

这不是一个好的解决方案，容器的宽度以像素为单位，通过左填充移动它意味着调整大小时会出现滚动条。