Angularjs 使用角度ui引导和固定边栏

我见过几个使用引导ScrollSpy/Affix的例子，但我很难将其应用于angular ui引导。我希望在我的UI上有一个固定的左侧边栏（即使页面的其余部分正在滚动，它的位置也会保持不变）

我有两个plnkr。一个显示了一个不固定的（但大部分是功能性的）侧边栏，另一个显示了一个几乎正常工作的固定侧边栏——但是内容将宽度推得比它应该的更远。在第二个示例中，如果我能找出如何将宽度约束到父宽度，它将按照我的要求工作：

静态侧栏：

位置：固定（但宽度推出过远）侧边栏：

以下是重要的代码：

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

截图：

---

有人知道我怎样才能让它工作吗？谢谢你，Adam，试着给你固定的元素增加一个宽度，例如

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

更新：
这里有一个改进，它使用本机引导类和一些媒体查询来管理边栏宽度：
CSS:

.sidebar-fixed {
    position: fixed;
}

HTML

侧栏内容
主要内容

你好，大卫，谢谢你的回复。我试图解决的问题是，我希望通过使用引导网格系统来使用动态/相对宽度。边栏容器是.col-md-3，它的宽度类似于网格的25%（我想）。硬编码的宽度有点工作，但也有点违背了将其保留在网格中的目的。我想用边栏容器在任何屏幕宽度上都保持大小合适。我可以使用媒体查询以100px的间隔或其他方式将其调整为绝对宽度，但是。。。这看起来相当骇客：-/@AdamPlocher，现在检查一下，当我有机会的时候，我会为这个线程发布一个类似的解决方案Hanks David，这非常有趣。我在玩弄位置：相对的固定容器和我的生活，我无法让它工作。似乎通过在固定元素上不指定顶部、左侧、右侧或底部，它允许它相对于父元素。我一指定，它就断了。这可能是我需要的解决方案。我将试着把这个放在我的解决方案中，看看是否有其他的“陷阱”出现。。。很快会通知您的，再次感谢！

.sidebar-fixed {
    position: fixed;
}

<div class="col-md-3 sidebar-fixed">Side bar content</div>
<div class="col-md-9">Main Content</div>