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?
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
Du musst angemeldet sein, um einen Kommentar abzugeben.
Um dies zu erreichen, müssen Sie zuerst geben Sie jeder Spalte eine
class
. Dann müssen Sie Ihnen die folgenden Eigenschaften:Können Sie auch wollen, um Ihren
body
Eigentumoverflow: hidden;
Bitte sagen Sie mir, ob dies funktioniert und wenn nicht helfe ich weiter!
Edit: Erstellt ein JSFiddle
https://jsfiddle.net/mjmwaqfp/2/
Sobald die Seite angezeigt wird, auf einer Breite, die bewirken, dass das Spalten bis effizient shift - die Verschiebung der Spalten versteckt werden unter den verbleibenden Spalten.
Mit der
absolute
position wird nicht völlig zu zerstören bootstrap 3 Reaktionsfähigkeit, wenn Sie behandeln es richtig, innerhalb des Elements. Bitte tun Sie Ihre Forschung, bevor Sie versuchen zu Schießen jemand die Antwort von unten. Dieses Thema Ist fast ein Jahr alt. Eine neue version von bootstrap aus, die ich schlage vor, Sie schauen in wie dass es neue Wege gibt, dies zu tun.einen link zu der neuen Möglichkeiten wäre sinnvoll gewesen
Keine Ahnung, wie das geht in der version 4.x? Danke.
InformationsquelleAutor Thomas Withers