使用angular-ui-bootstrap和固定的侧边栏 [英] Using angular-ui-bootstrap and a fixed sidebar

问题描述

我已经看到了使用引导ScrollSpy/Affix的几个示例，但是我很难将其应用于angular-ui-bootstrap.我想在UI上设置一个左侧边栏，该边栏是固定的(即使页面的其余部分正在滚动，它的位置仍保持不变).

I've seen several examples of using bootstrap ScrollSpy / Affix, but I'm having a hard time applying that to angular-ui-bootstrap. I would like to have a left-sidebar on my UI, that is fixed (it's position remains even when the rest of the page is scrolling).

我有两个plnkr.一个显示非固定(但主要是功能性)的侧边栏，另一个显示ALMOST工作的固定侧边栏-但是内容将宽度压得比应有的大.在第二个示例中，如果我可以弄清楚如何将宽度限制为父级宽度，则可以按照我的意愿进行工作:

I have two plnkr's. One shows a non-fixed (but mostly functional) sidebar, the other shows an ALMOST working fixed sidebar - but the content pushes the width out further than it should. In the second example, if I could figure out how to constrain the width to the parent width, it would work how I want:

静态侧边栏: http://plnkr.co/edit/A1kyi1?p=preview

位置:固定(但宽度被推出太远)侧边栏: http://plnkr .co/edit/R11BFt?p = preview

position:fixed (but width is pushed out too far) sidebar: http://plnkr.co/edit/R11BFt?p=preview

这是重要的代码:

  <div class="container pull-left">
    <div class="row">
      <div class="col-sm-12 col-md-3 sidebar" style="background-color:blue;">
        <div style="background-color:orange;">
          Some side bar stuff
          <br />
          <br /> Some side bar stuff
          <br />
          <br /> Some side bar stuff
          <br />
          <br /> Some side bar stuff
          <br />
          <br /> Some side bar stuff
          <br />
          <br /> Something that pushes the width out.  Something that pushes the width out....    
        </div>
      </div>
      <div class="col-sm-12 col-md-9" style="background-color:#eeeeee;">
        <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox
          jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy
          dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown
          fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the
          lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
        </p>

css:

.sidebar > div {  position: fixed; z-index:10000; top:50px;left:0;}

截屏:

有人知道我如何使它工作吗?谢谢

Does anyone know how I can get this working? Thanks

推荐答案

Adam，请尝试为您固定的元素添加宽度，例如

Adam, try adding a width to your the element that's fixed, eg

.sidebar > div {  position: fixed; z-index:10000; top:50px;left:0; width:200px;}  

更新:
这是使用本地Bootstrap类和一些媒体查询来管理侧边栏宽度的改进:
https://codepen.io/panchroma/pen/zzBZzV

Update:
Here's a refinement which uses native Bootstrap classes and a few media queries to manage the sidebar width:
https://codepen.io/panchroma/pen/zzBZzV

这篇关于使用angular-ui-bootstrap和固定的侧边栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！