css - BootStrap，如何在右侧对齐固定的右列

Question

我的列右侧有一个导航栏，需要将其固定在容器顶部。问题是当导航固定后，我无法将其正确对齐在左栏的右侧...我可以使用 col-md-offset-xx 对齐它，但如果浏览器宽度发生变化，导航将是不再对齐。

https://jsfiddle.net/DTcHh/18665/

<div style="width:1170px;margin:10px auto;position:relative;padding:10px;border:1px solid black;">
  <div class="row">
    <div class="col-md-9" style="border:1px solid green;">
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
    </div>
    <div class="col-md-3 col-md-offset-6" style="border:1px solid red;position:fixed;top:0px;">
      <h1>Right column</h1>
    </div>
  </div>
</div>

Answer 1

您需要像这样使用非堆叠(xs)列..

<div class="row">
    <!-- main -->
    <div class="column col-xs-9">
    ..
    </div>    
    <!-- sidebar -->
    <div class="column col-xs-3" id="sidebar">
      Fixed right sidebar
    </div>
</div>

这样，在较小的设备上，列就不会垂直堆叠(换行成新行)，并且右侧边栏可以保持固定。

http://www.bootply.com/DZ1Csh3dRH