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

Posted 2023-03-06

【中文标题】如何在 Bootstrap 中创建可滚动的列？

【英文标题】：How can I create scrollable columns in Bootstrap?

【发布时间】：2016-05-03 16:25:44

【问题描述】：

我在 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>

当我从主要部分中删除“可滚动”类并将其包含在列 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>

【问题讨论】：

能否请您提供一个 JS 小提琴，不太确定您想要实现什么

很难让它在 jsfiddle 中工作。但是该网站的实时网址可以完成这项工作吗？

是的，可以工作

@GuruTom 您可以在这里查看完整的布局：utopic.vision/html - 现在我已将“可滚动”类添加到第一列，这就是它不可见的原因。

啊，好的，所以您希望每个块（列）都可以滚动？

【参考方案1】：

要实现这一点，您首先需要为每一列指定一个class。然后你需要给他们以下属性：

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

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

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

编辑：创建了一个 JSFiddle

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

【讨论】：

这 - 当前接受的答案 - 不是一个好主意。这将 - 完全 - 破坏引导布局的响应能力。我一看到“位置：绝对”就应该知道；

一旦页面以会导致列响应移动的宽度查看 - 移动的列将隐藏在其余列下。

@stnfordly 如果您在元素中正确处理它，使用absolute 位置不会完全破坏引导程序 3 的响应性。请在尝试拒绝某人的答案之前进行研究。这个话题已经快一年了。一个新版本的引导程序已经发布，我建议您研究一下，因为有新的方法可以做到这一点。

@ThomasWithers 一个指向新方法的链接会很有用

@NoChance 检查此引导程序 4：***.com/questions/47649920/…

【参考方案2】：

以下答案 https://***.com/a/53897001/11620296 显示了 bootstrap 4 的解决方案，这对我来说非常有效。它已经更新了演示https://www.codeply.com/go/ouc3hddx5i

代码：

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 ***lyn 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

html,body 
    height: 100%;

【讨论】：

这是一个很好的解决方案，而且是正确的解决方案！谢谢