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

Answer 2

在 Bootstrap 中，网格系统基于 12 列，而您在右侧列中添加 .col-md-offset-6 类违反了网格系统逻辑。如果您想在左右列之间具有相同的比例。你的代码应该是这样的：

<div style="width:1170px;margin:10px auto;position:relative;padding:10px;border:1px solid black;">
  <div class="row">
    <div class="col-xs-9 col-sm-9 col-md-9 col-lg-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-xs-3 col-sm-3 col-md-3 col-lg-3" style="border:1px solid red;position:fixed;top:0px;">
      <h1>Right column</h1>
    </div>
  </div>
</div>

或者如果你想在左右列之间添加边距，你的代码应该是这样的：

<div style="width:1170px;margin:10px auto;position:relative;padding:10px;border:1px solid black;">
  <div class="row">
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" 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-xs-3 col-xs-offset-6 col-sm-3 col-sm-offset-6 col-md-3 col-md-offset-6 col-lg-3 col-lg-offset-6" style="border:1px solid red;position:fixed;top:0px;">
      <h1>Right column</h1>
    </div>
  </div>
</div>

这是一个你理解网格和偏移逻辑的例子：

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>

如您所见，总数为 12 (col-md-4 + col-md-4 + col-md-offset-4)，带有偏移量。

Answer 3

您可以使用引导类：pull-right（如果您只希望 div 向右对齐）。如果您想在页面顶部，您应该在每个 h1 中添加“float:left & right”或删除 col-offset（9+3 正确对齐）。

你可以在这里看到这个：https://jsfiddle.net/DTcHh/18666/

更多信息在这里：Left align and right align within div in Bootstrap 和这里：http://getbootstrap.com/css/