如何在Bootstrap中创建可滚动列？ [英] How can I create scrollable columns in Bootstrap?

问题描述

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

I created a new template file template-home2.php in a Wordpress Theme.

有一行有3列，我想让每个这些列可滚动，而不是整个页面。我如何实现这一点？

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?

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

I have a class scrollable that I apply to the outer section of the page to make it 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中时，

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.

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

推荐答案

需要给每个列一个类然后你需要给他们以下属性：

Okay so to achieve this how you want you will first need to give each column a class You then need to give them the following properties:

.Your-Class {
    position: absolute;
    overflow-y: scroll;
}

您也可以给予 code>属性 overflow：hidden;

请告诉我这是否有效进一步！

Please tell me if this works and if not Ill help further!

编辑：创建JSFiddle

Created a JSFiddle

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

这篇关于如何在Bootstrap中创建可滚动列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！