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

网格旁边创建一个固定的侧边栏

关注

发信

关注(28)粉丝(399)

本文介绍了在居中的 Bootstrap 3 网格旁边创建一个固定的侧边栏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

HTML

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

CSS

html, body {高度:100%；宽度:100%；}#左导航{背景:#2b2b2b；位置:绝对；顶部:0px；左:0px；高度:100%；宽度:250px；}

解决方案

正如draw_w 所说，你可以在这里找到一个很好的例子.

HTML


<div id="sidebar-wrapper"><ul class="sidebar-nav"><li class="sidebar-brand"><a href="#">首页</a></li><li><a href="#">另一个链接</a></li><li><a href="#">下一个链接</a></li><li><a href="#">最后一个链接</a></li>
<div id="page-content-wrapper"><div class="page-content"><div class="容器"><div class="row"><div class="col-md-12"><!-- 页面内容-->

CSS

#wrapper {padding-left: 250px;过渡:所有 0.4s 缓和 0s；}#sidebar-wrapper {左边距:-250px；左:250px；宽度:250px；背景:#CCC；位置:固定；高度:100%；溢出-y:自动；z-索引:1000；过渡:所有 0.4s 缓和 0s；}#page-content-wrapper {宽度:100%；}.sidebar-nav {位置:绝对；顶部:0；宽度:250px；列表样式:无；边距:0；填充:0；}@media(最大宽度:767px){#包装{填充左:0;}#sidebar-wrapper {左:0；}#wrapper.active {位置:相对；左:250px；}#wrapper.active #sidebar-wrapper {左:250px；宽度:250px；过渡:所有 0.4s 缓和 0s；}}

I'd like to create a fixed sidebar that exists outside my centered Bootstrap Grid. The challenge I face when attempting to do this is determining what additional styles to apply/overwrite to my .container so that it doesn't overlap my sidebar when the screen is resized.

For starters I'm only using the grid portion of the css framework so the .container, .row and .col-md-12 is code pulled from the bootstrap.css file itself and is not custom. Also keep in mind I'm using Bootstrap 3, so please, no suggestions for a fluid grid solution for Bootstrap 2 that is often asked about in previous threads.

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;
}

解决方案

As drew_w said, you can find a 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;
    }

}

这篇关于在居中的 Bootstrap 3 网格旁边创建一个固定的侧边栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

09-02 12:48