首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在响应式网格中创建固定列?

如何在响应式网格中创建固定列?
EN

Stack Overflow用户
提问于 2017-05-22 04:52:11
回答 1查看 8.9K关注 0票数 6

使用Bootstrap,是否有可能为某些断点保持一个固定的网格列?以及同一列与其他断点的页面堆叠和流动吗?

在下面的示例中,对于大屏幕,我希望右列中的内容滚动,而左列保持不变。对于小屏幕,左边的列应该堆叠在右边,页面应该正常滚动。

代码语言:javascript
复制
<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>

CodePen sample

EN

回答 1

Stack Overflow用户

发布于 2017-05-22 23:24:40

偏移不固定的列:

代码语言:javascript
复制
<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

代码语言:javascript
复制
@include media-breakpoint-up('lg') {
    #left {
        position: fixed;
        top: 0;
        bottom: 0;
    }
}

Codepen sample

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/44101666

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档