¿Cómo puedo crear columnas desplazables en Bootstrap?

5 minutos de lectura

avatar de usuario
Halnex

Creé un nuevo archivo de plantilla template-home2.php en un tema de WordPress.

Allí tengo una fila con 3 columnas, me gustaría hacer desplazable cada una de estas columnas en lugar de toda la página. ¿Cómo puedo lograr eso?

Tengo una clase scrollable que aplico a la sección exterior de la página para que sea desplazable.

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

Cuando elimino la clase “desplazable” de la sección principal y la incluyo en la columna div, la columna desaparece y las otras 2 columnas se desbordan en los elementos a continuación.

Este es el CSS relevante

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

Gracias por tu ayuda.

CÓDIGO ACTUALIZADO

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

  • ¿Puede proporcionar un violín JS, no estoy seguro de lo que quiere lograr?

    – Tom Withers

    26 de enero de 2016 a las 22:27

  • Va a ser difícil hacer que funcione en jsfiddle. Pero, ¿una URL en vivo al sitio haría el trabajo?

    – Halnex

    26/01/2016 a las 22:50

  • sí, eso funcionaría

    – Tom Withers

    26 de enero de 2016 a las 22:53

  • @GuruTom Puede ver el diseño completo aquí: utopica.vision/html – por ahora he agregado la clase “desplazable” a la primera columna y es por eso que es invisible.

    – Halnex

    26 de enero de 2016 a las 23:18

  • ahh, bien, ¿quieres que cada bloque (columna) sea desplazable?

    – Tom Withers

    26 de enero de 2016 a las 23:31

avatar de usuario
Tom Withers

Para lograr esto, primero tendrá que dar a cada columna un class. Entonces necesitas darles las siguientes propiedades:

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

También puede darle a su body la propiedad overflow: hidden;

¡Por favor, dime si esto funciona y si no te ayudaré más!

Editar: creó un JSFiddle

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

  • Esta, respuesta actualmente aceptada, no es una buena idea. esto destruirá, por completo, la capacidad de respuesta de su diseño de arranque. Debería haberlo sabido tan pronto como vi “posición: absoluta”;

    usuario8588978

    10 de enero de 2018 a las 2:27

  • Tan pronto como la página se visualice con un ancho que hará que las columnas se desplacen de manera receptiva, las columnas de desplazamiento se ocultarán debajo de las columnas restantes.

    usuario8588978

    10 de enero de 2018 a las 4:44

  • @stnfordly Usando el absolute position no destruirá por completo la capacidad de respuesta de bootstrap 3 si lo maneja correctamente dentro del elemento. Investigue antes de intentar derribar la respuesta de alguien. Este tema tiene casi un año. Ha salido una nueva versión de bootstrap que le sugiero que busque, ya que hay nuevas formas de hacerlo.

    – Tom Withers

    10 de enero de 2018 a las 9:21

  • @ThomasWithers un enlace a las nuevas formas hubiera sido útil

    – Akrush95

    8 de agosto de 2018 a las 16:40

  • @NoChance verifique esto para Bootstrap 4: stackoverflow.com/questions/47649920/…

    – erozo

    24/06/2019 a las 14:00


La siguiente respuesta https://stackoverflow.com/a/53897001/11620296 muestra la solución con bootstrap 4 que funciona perfectamente para mí. Tiene demo actualizada https://www.codeply.com/go/ouc3hddx5i

Código:

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

html,body {
    height: 100%;
}

¿Ha sido útil esta solución?