Question

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

<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对齐到右侧）。如果你想在页面的顶部，你应该添加'float：left＆amp;右'到每个h1或删除col-offset（9 + 3正确对齐）。

您可以在此处看到：https://jsfiddle.net/DTcHh/18666/

此处提供了更多信息：Left align and right align within div in Bootstrap和此处：http://getbootstrap.com/css/

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

3 个答案: