twitter-bootstrap BootStrap，如何在右侧对齐固定的右列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36292390/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
BootStrap , How to align a fixed right column at the right
提问by user2942945
I have a nav bar at the right of an column that need to be fixed at the top of the container. The problem is when the nav is fixed, I am not able to align it correctly at the right of the left column... I can align it by using col-md-offset-xx but if the browser width change the nav will be not aligned anymore.
我在需要固定在容器顶部的列右侧有一个导航栏。问题是当导航固定时，我无法在左列的右侧正确对齐它...我可以使用 col-md-offset-xx 对齐它，但是如果浏览器宽度发生变化，导航将是不再对齐。
https://jsfiddle.net/DTcHh/18665/
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>
回答by Zim
You need to use the non-stacking (xs) columns like this..
您需要像这样使用非堆叠 (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>
This way the columns won't stack vertically (wrap into a new row) on smaller devices and your right sidebar can remain fixed.
这样，列不会在较小的设备上垂直堆叠（换行成新行），并且您的右侧边栏可以保持固定。
回答by Kaan Burak Sener
In Bootstrap, the grid system is based on 12columns and you are violating the grid system logic by adding .col-md-offset-6class to the right column. If you want to have same ratio among left and right columns. Your code should be like this:
在 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>
or if you want to add margin between left and right columns, your code should be like:
或者如果你想在左右列之间添加边距，你的代码应该是：
<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>
Here is an example you to understand grid and offset logic:
以下是您了解网格和偏移逻辑的示例：
<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>
As you see, total is 12 (col-md-4 + col-md-4 + col-md-offset-4) with offset.
如您所见，总计为 12 (col-md-4 + col-md-4 + col-md-offset-4) 和偏移量。
回答by JP. Aulet
You could use the bootstrap class: pull-right(if you only want the div aligned to the right). If you want at the top of the page, you should add 'float:left & right' to each h1 or removing the col-offset (9+3 align properly).
您可以使用 bootstrap 类：（pull-right如果您只希望 div 向右对齐）。如果你想在页面顶部，你应该为每个 h1 添加 'float:left & right' 或删除 col-offset（9+3 正确对齐）。
You can see this here: https://jsfiddle.net/DTcHh/18666/
你可以在这里看到这个：https: //jsfiddle.net/DTcHh/18666/
More information here: Left align and right align within div in Bootstrapand here: http://getbootstrap.com/css/
此处的更多信息：在 Bootstrap 中的 div 内左对齐和右对齐，此处：http: //getbootstrap.com/css/
