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