在中心的Bootstrap 3网格旁边创建一个固定边栏 [英] Creating a fixed sidebar alongside a centered Bootstrap 3 grid

问题描述

我想要创建一个固定的侧边栏，它位于外部我的中心引导网格。尝试这样做时，我面临的挑战是确定要应用/覆盖到我的 .container 的其他样式，以便它不会重叠我的边栏，当屏幕调整大小。

对于初学者，我只使用css框架的网格部分，所以 .container ， .row 和 .col-md-12 是从引导的代码bootstrap.css 文件本身，而不是自定义。还要记住，我使用的是 Bootstrap 3 ，所以请不要建议一个流水线解决方案Bootstrap 2，在以前的线程经常被问到。

HTML

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

解决方案

如drew_w所说，您可以找到此处的好例子。

HTML

 < div id =wrapper> 
< 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> 
< / ul> 
< / div> 
< div id =page-content-wrapper> 
< div class =page-content> 
< div class =container> 
< div class =row> 
< div class =col-md-12> 
<！ - 页面内容 - > 
< / 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; 
} 
 
} 
  

< a href =http://jsfiddle.net/eggleton/24sh7y11/> JSFIDDLE

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

}

JSFIDDLE

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