css - 如何在 Bootstrap 中创建可滚动的列？

Question

我在 Wordpress 主题中创建了一个新的模板文件 template-home2.php。

在那里我有一行 3 列，我想让这些列中的每一列都可以滚动，而不是整个页面。我怎样才能做到这一点？

我有一个 scrollable 类，我将其应用于页面的外部部分以使其可滚动。

<section class="<?php if( get_theme_mod( 'hide-player' ) == 0 ){ echo "w-f-md";} ?>" id="ajax-container">
    <section class="hbox stretch bg-black dker">
        <section>
            <section class="vbox">
                <section class="scrollable">
                    <div class="row">
                       <div class="col-md-5 no-padder no-gutter">
                           some data
                       </div>
                       <div class="col-md-4 no-padder no-gutter">
                           some data
                       </div>
                       <div class="col-md-3 no-padder no-gutter">
                           some data
                       </div>
                    </div>
                </section>
            </section>
        </section>
    </section>
</section>

当我从主要部分中删除类“scrollable”并将其包含在列 div 中时，该列消失并且其他 2 列溢出到下面的元素上。

这是相关的 CSS

.scrollable {
  overflow-x: hidden;
  overflow-y: auto;
}
.no-touch .scrollable.hover {
  overflow-y: hidden;
}
.no-touch .scrollable.hover:hover {
  overflow: visible;
  overflow-y: auto;
}
.slimScrollBar {
  border-radius: 5px;
  border: 2px solid transparent;
  border-radius: 10px;
  background-clip: padding-box !important;
}

感谢您的帮助。

更新代码

.homecol1, .homecol2, .homecol3 {
    position: absolute;
    overflow-y: scroll;
}

<section class="<?php if( get_theme_mod( 'hide-player' ) == 0 ){ echo "w-f-md";} ?>" id="ajax-container">
    <section class="hbox stretch bg-black dker">
        <section>
            <section class="vbox">
                <section class="scrollable">
                    <div class="row">
                       <div class="col-md-5 no-padder no-gutter homecol1">
                           some data
                       </div>
                       <div class="col-md-4 no-padder no-gutter homecol2">
                           some data
                       </div>
                       <div class="col-md-3 no-padder no-gutter homecol3">
                           some data
                       </div>
                    </div>
                </section>
            </section>
        </section>
    </section>
</section>

Answer 1

为此，您首先需要为每一列指定一个类。然后你需要给他们以下属性:

.your-class {
    position: absolute;
    overflow-y: scroll;
}

你可能还想给你的 body 属性 overflow: hidden;

请告诉我这是否可行，如果不行，我会进一步提供帮助!

编辑:创建了一个 JSFiddle

https://jsfiddle.net/mjmwaqfp/2/