CSS 如何在 Bootstrap 中创建可滚动列？

How can I create scrollable columns in Bootstrap?

提问by Halnex

I created a new template file template-home2.phpin a Wordpress Theme.

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

In there I have a row with 3 columns, I would like to make each of these columns scrollable instead of the entire page. How can I achieve that?

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

I have a class scrollablethat I apply to the outer section of the page to make it scrollable.

我有一个类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>

When I remove the class “scrollable” from the main section and include it in the column div, the column disappears and the other 2 columns overflow on the elements below.

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

This is the relevant CSS

这是相关的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;
}

Thank you for your help.

感谢您的帮助。

UPDATED CODE

更新代码

.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>

采纳答案by Tom Withers

To achieve this, you will first need to give each column a class. Then you need to give them the following properties:

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

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

You may also want to give your bodythe property overflow: hidden;

你可能还想把你body的财产overflow: hidden;

Please tell me if this works and if not I'll help further!

请告诉我这是否有效，如果无效，我会进一步提供帮助！

Edit: Created a JSFiddle

编辑：创建了一个 JSFiddle

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

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

回答by Nikolay

Following answer https://stackoverflow.com/a/53897001/11620296shows solution with bootstrap 4 which works perfectly for me. It has updated demo https://www.codeply.com/go/ouc3hddx5i

以下回答https://stackoverflow.com/a/53897001/11620296显示了 bootstrap 4 的解决方案，它非常适合我。它已更新演示https://www.codeply.com/go/ouc3hddx5i

Code:

代码：

html

html

<div class="container-fluid h-100 d-flex flex-column">
    <div class="row flex-shrink-0">
        <div class="col-12 border">Navbar </div>
    </div>
    <div class="row flex-fill" style="min-height:0">
        <div class="col-2 border mh-100" style="overflow-y: scroll;">Sidebar </div>
        <div class="col-4 border mh-100" style="overflow-y: scroll;">
            Article list
            <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics,
                raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation.
                Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p>

            <p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb
                readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies,
                forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>

        </div>
        <div class="col-6 border" style="overflow-y: scroll;">Article content </div>
    </div>
    <div class="row flex-shrink-0">
        <div class="col-12 border">Footer </div>
    </div>
</div>

css

css

html,body {
    height: 100%;
}