Wie kann ich scrollbarer Spalten in der Bootstrap?

Ich habe eine neue template-Datei template-home2.php in ein WordPress-Theme.

Dort habe ich eine Zeile mit 3 Spalten möchte ich die einzelnen Spalten Scrollbar, anstatt die gesamte Seite. Wie kann ich das erreichen?

Habe ich eine Klasse scrollable dass ich bei dem äußeren Abschnitt der Seite, damit es Scrollbar ist.

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

Wenn ich Entferne die Klasse "scrollbaren" aus der main-Sektion und fügen Sie es in die Spalte " div, die Spalte verschwindet und die anderen 2 Spalten überlauf auf die Elemente unten.

Dies ist der relevante 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;
}

Danke für Eure Hilfe.

AKTUALISIERTEN 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>
Können Sie bitte ein JS-fiddle, nicht ganz sicher, was Sie erreichen wollen
Es ist gonna hart sein, um es in jsfiddle. Würde aber eine live-url zu der Website, die den job tun?
ja, das würde funktionieren
Sie können einen Blick auf das komplette layout hier: utopische.vision/html - für die ich jetzt Hinzugefügt habe, "Scrollbar" - Klasse, um die erste Spalte und das ist, warum es unsichtbar ist.
ahh, Okay, so Sie wollen, dass jeder block (Spalte) werden scrollbaren?

InformationsquelleAutor Halnex | 2016-01-26

Schreibe einen Kommentar