如何在响应式网格中创建固定列？
如何在响应式网格中创建固定列？
提问于 2017-05-22 04:52:11
使用Bootstrap，是否有可能为某些断点保持一个固定的网格列？以及同一列与其他断点的页面堆叠和流动吗？
在下面的示例中，对于大屏幕，我希望右列中的内容滚动，而左列保持不变。对于小屏幕，左边的列应该堆叠在右边，页面应该正常滚动。
<div class="container-fluid">
<div class="row">
<div class="col-lg-2">
I want this to always be visible as the right side scrolls.
</div>
<div class="col">
...
</div>
</div>
</div>回答 1
Stack Overflow用户
发布于 2017-05-22 23:24:40
偏移不固定的列：
<div class="container-fluid">
<div class="row">
<div class="col-lg-2">
I want this to always be visible as the right side scrolls.
</div>
<div class="col offset-lg-2">
...
</div>
</div>
</div>并应用媒体查询来修复相关断点的另一列：
https://getbootstrap.com/docs/4.0/layout/grid/#grid-options https://getbootstrap.com/docs/4.0/layout/grid/#mixins
@include media-breakpoint-up('lg') {
#left {
position: fixed;
top: 0;
bottom: 0;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44101666
复制相关文章
相似问题
腾讯云开发者
