logo标签列表

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

csstwitter-bootstrap
6
我有一个导航栏在一个列的右侧，需要固定在容器的顶部。问题是当导航栏被固定时，我无法正确地将其与左列对齐...我可以使用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>
3个回答
6
您需要像这样使用非堆叠(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
4

enter image description here

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

Result

正如您所看到的，总共是12（col-md-4 + col-md-4 + col-md-offset-4），带有偏移量。
col-md-offset 只是添加了边距。 - user2942945
1
总列数必须为12。您误解了Bootstrap中的网格逻辑。 - Kaan Burak Sener
不，总数不一定要是12。在某些情况下，您需要在每行中使用超过12个单位（http://getbootstrap.com/css/#grid-example-wrapping）。这只会导致行换行。 - Carol Skelly
@Skelly 但最终事实并没有改变，如果你想保持你的列在一行中，你不应该超过12个单位。 - Kaan Burak Sener
1
每个断点不应超过12，如果您不想换行。一般来说，每行单元格的列数可以超过12（有时甚至更多），以在每个断点处创建不同的布局。一个常见的误解是row必须加起来等于12。在OP的情况下，问题不是因为他超过了12，而是因为他使用了md断点，最终会在768px处堆叠。通过将其切换到xs，他的代码（带有偏移量-6）按预期工作：http://bootply.com/ad5sj2uxL7 - Carol Skelly
1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接