twitter-bootstrap 如何在 Bootstrap 4 中左列固定和右滚动，响应？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44086159/
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
How to left column fixed and right scrollable in Bootstrap 4, responsive?
提问by Isak La Fleur
I'm using Angular 4, Bootstrap 4 and trying to implement a fixed scrollable right div and a fixed left div. It should very similar to what Truliahas.
我正在使用 Angular 4、Bootstrap 4 并尝试实现一个固定的可滚动右 div 和一个固定的左 div。它应该与Trulia 所拥有的非常相似。
Bootstrap dropped the Affix jQuery plugin in version 4 so this method is not valid anymore, they recommend to use position: sticky, but I cant get it to work.
Bootstrap 在版本 4 中删除了 Affix jQuery 插件，因此此方法不再有效，他们建议使用 position:sticky，但我无法使其工作。
Please help!
请帮忙！
index.html
索引.html
<div class="container-fluid">
<div class="row h-100">
<div class="col-md-6">
<div id="left-container">
<div class="search-property">
<input type="text">
</div>
</div>
</div>
<div class="col-md-6">
<div id="right-container">
<app-home-right></app-home-right>
</div>
</div>
</div>
</div>
style.css
样式文件
#left-container {
height: 100%;
position: fixed;
width: inherit;
}
#right-container {
position: absolute;
}
.search-property {
position: relative;
top: 50%;
transform: perspective(1px) translateY(-50%);
margin-left: 50%;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.border {
border: 1px solid black;
}
回答by Zim
I'm not sure if you simply want a layout with 1 fixed side, or for the side to be fixed until it reaches the footer (like Trulia). Here's a simple layout with fixed left side (Split 50 50).
我不确定您是否只是想要一个带有 1 个固定边的布局，或者要固定边直到它到达页脚（如 Trulia）。这是一个带有固定左侧的简单布局（Split 50 50）。
body, html {
height: 100%;
}
#left {
position: fixed;
top: 0;
bottom: 0;
}
https://www.codeply.com/go/IuOp3nvCpy
https://www.codeply.com/go/IuOp3nvCpy
To make the side fixed (or sticky) only at a specific point, position:stickydoesn't work very well across all browsers. I'd use a plugin or polyfill as explained here: How to use CSS position sticky to keep a sidebar visible with Bootstrap 4
仅在特定点使侧面固定（或粘性），position:sticky在所有浏览器中都不能很好地工作。我会使用插件或 polyfill，如下所述：How to use CSS position sticky to keep a sidebar visible with Bootstrap 4
Update Bootstrap 4.0.0- The fixed-topclass is now in Bootstrap which can be used on the left side column to remove the extra css that was required for position:fixed.
更新 Bootstrap 4.0.0-fixed-top该类现在位于 Bootstrap 中，可用于左侧列以删除position:fixed.
Update Bootstrap 4.1- The h-100class is now available which eliminates the extra CSS that was needed for height:100%: https://www.codeply.com/go/ySC2l4xcEi
更新 Bootstrap 4.1-h-100该类现在可用，它消除了以下所需的额外 CSS height:100%：https: //www.codeply.com/go/ySC2l4xcEi
Responsive- As mentioned in the comments, a media query can be used to make the layout responsive: https://www.codeply.com/go/pqzJB4thBY
响应式- 正如评论中提到的，媒体查询可用于使布局响应式：https: //www.codeply.com/go/pqzJB4thBY
有关的：
fixed col on right side右侧固定 col
How to create a fixed sidebar layout with Bootstrap 4?如何使用 Bootstrap 4 创建固定的侧边栏布局？
