CSS 在引导程序中使列固定位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21868610/
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
Make column fixed position in bootstrap
提问by Naga prasanna
Using Bootstrap, I have a grid column class="col-lg-3" that I want to place it in position:fixed while the other .col-lg-9 is normal position (scroll-able through the page).
使用 Bootstrap，我有一个网格列 class="col-lg-3" ，我想将它放置在 position:fixed 而另一个 .col-lg-9 是正常位置（可滚动浏览页面）。
<div class="row">
<div class="col-lg-3">
Fixed content
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>
Just the same way like the left column in LifeHacker.comYou will see that the left part is fixed however I scroll though the page.
就像LifeHacker.com中的左栏一样，你会看到左边的部分是固定的，但是我滚动页面。
I use bootstrap v3.1.1
我使用引导程序 v3.1.1
采纳答案by Pablo Fernandez
Following the solution here http://jsfiddle.net/dRbe4/,
按照这里的解决方案http://jsfiddle.net/dRbe4/，
<div class="row">
<div class="col-lg-3 fixed">
Fixed content
</div>
<div class="col-lg-9 scrollit">
Normal scrollable content
</div>
</div>
I modified some css to work just perfect:
我修改了一些 css 使其完美运行：
.fixed {
position: fixed;
width: 25%;
}
.scrollit {
float: left;
width: 71%
}
Thanks @Lowkase for sharing the solution.
感谢@Lowkase 分享解决方案。
回答by Naga prasanna
<div class="row">
<div class="col-lg-3">
<div class="affix">
fixed position
</div>
</div>
<div class="col-lg-9">
Normal data enter code here
</div>
</div>
回答by Pablo Fernandez
iterating over Ihab's answer, just using position:fixedand bootstraps col-offsetyou don't need to be specific on the width.
迭代 Ihab 的答案，只需使用position:fixed和引导程序，col-offset您就不需要对宽度进行具体说明。
<div class="row">
<div class="col-lg-3" style="position:fixed">
Fixed content
</div>
<div class="col-lg-9 col-lg-offset-3">
Normal scrollable content
</div>
</div>
回答by Mohsen Sahrayi
in Bootstrap 3 class="affix"works, but in Bootstrap 4 it does not.
I solved this problem in Bootstrap 4 with class="sticky-top"(using position: fixedin CSS has its own problems)
在 Bootstrap 3 中class="affix"有效，但在 Bootstrap 4 中无效。我在 Bootstrap 4 中解决了这个问题class="sticky-top"（position: fixed在 CSS 中使用有它自己的问题）
code will be something like this:
代码将是这样的：
<div class="row">
<div class="col-lg-3">
<div class="sticky-top">
Fixed content
</div>
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>
回答by Zim
Updated for Bootstrap 4
为 Bootstrap 4 更新
Bootstrap 4 now includes a position-fixedclass for this purpose so there is no need for additional CSS...
Bootstrap 4 现在包含一个position-fixed用于此目的的类，因此不需要额外的 CSS ...
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="position-fixed">
Fixed content
</div>
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>
</div>
回答by Lucke
Use this, works for me and solve problems with small screen.
使用它，对我有用并解决小屏幕问题。
<div class="row">
<!-- (fixed content) JUST VISIBLE IN LG SCREEN -->
<div class="col-lg-3 device-lg visible-lg">
<div class="affix">
fixed position
</div>
</div>
<div class="col-lg-9">
<!-- (fixed content) JUST VISIBLE IN NO LG SCREEN -->
<div class="device-sm visible-sm device-xs visible-xs device-md visible-md ">
<div>
NO fixed position
</div>
</div>
Normal data enter code here
</div>
</div>
回答by stefanitsky
回答by Dharm paaji
Just do this :
只需这样做：
<div class="row" style="position:fixed;">
<div class="col-lg-3">
Fixed content
</div>
<div class="col-lg-3"> //
<div class="col-lg-9">
Normal scrollable content
</div>
</div>
