numerada - listas html

Diseño consistente para listas anidadas con Bootstrap (5)

¿Hay alguna manera de hacer que las listas anidadas en el bootstrap de Twitter se vean como una lista normal, con los elementos anidados simplemente sangrados (y hacer que funcione para una anidación arbitrariamente profunda)? Por defecto, las listas anidadas se ven así:

<ul class="list-group"> <li class="list-group-item">One</li> <li class="list-group-item">Two <ul class="list-group"> <li class="list-group-item">Item 2a</li> <li class="list-group-item">Item 2b</li> </ul> </li> <li class="list-group-item">Three <ul class="list-group"> <li class="list-group-item">Item 3a</li> <li class="list-group-item">Item 3b</li> </ul> </li> </ul>

¿Cómo puedo hacer que estas listas anidadas se vean así (o de alguna manera similar):

En caso de que se haya perdido el enlace de arriba, aquí está el JSFiddle: this

Este fue mi enfoque:

.list-group-collapse li > ul li:first-child { border-top-left-radius: 0; border-top-right-radius: 0; } .list-group-collapse li > ul { margin-left: -16px; margin-right: -16px; margin-bottom: -11px; }

Si está utilizando BS3, entonces agregar la .list-group-collapse a su lista agrupada hará el truco. Ver JSFiddle: https://jsfiddle.net/oscar_dr/d2wpn8sd/1/

Por supuesto, puede ampliar BS con esta clase o cambiar los valores a sus medidas personalizadas si tiene un Bootstrap personalizado.

EDITAR: Fragmento agregado para responder:

.list-group-collapse li>ul li:first-child { border-top-left-radius: 0; border-top-right-radius: 0; } .list-group-collapse li>ul { margin-left: -16px; margin-right: -16px; margin-bottom: -11px; }

Modifiqué la respuesta de Marcos para trabajar con Bootstrap 4 (y los íconos fort-awesome) ya que los glificones ya no son parte de Bootstrap. Los principales cambios son:

reemplazar los glificones por íconos fuertes
agregar clase list-group-item-action a list-group-item
redefinir .collapse en css (tal vez hay un mejor enfoque)

.collapse { display: none; &.show { display: block; } }

JSFiddle

Actualización de Bootstrap 4

Quería poder usar esto con bootstrap 4. Espero que esto ayude a alguien más.

Aquí está el código que usa la fuente impresionante (ya que los glifos no son compatibles con V4).

Jfiddle de trabajo

HTML

CSS

.just-padding { padding: 15px; } .list-group.list-group-root { padding: 0; overflow: hidden; } .list-group.list-group-root .list-group { margin-bottom: 0; } .list-group.list-group-root .list-group-item { border-radius: 0; border-width: 1px 0 0 0; } .list-group.list-group-root > .list-group-item:first-child { border-top-width: 0; } .list-group.list-group-root > .list-group > .list-group-item { padding-left: 30px; } .list-group.list-group-root > .list-group > .list-group > .list-group-item { padding-left: 45px; } .list-group-item .glyphicon { margin-right: 5px; }

Javascript

$(function() { $(''.list-group-item'').on(''click'', function() { $(''.fas'', this) .toggleClass(''fa-angle-right'') .toggleClass(''fa-angle-down''); }); });

De una sola mano

<div class="container"> <div class="row"> <div class="col-xs-12"> <ul class="list-group"> <li class="list-group-item">One</li> <li class="list-group-item">Two <ul class="list-group inner"> <li class="list-group-item">Item 2a</li> <li class="list-group-item">Item 2b</li> </ul> </li> <li class="list-group-item">Three <ul class="list-group inner"> <li class="list-group-item">Item 3a</li> <li class="list-group-item">Item 3b</li> </ul> </li> </ul> </div> </div>

<style> .list-group.inner li{ border:none; } </style>

https://jsfiddle.net/7o8rp0kv/3/

Listas de grupo anidadas

Ver en fiddler: https://jsfiddle.net/u3gd85cj/

Listas de grupo anidadas (plegables)

$(function() { $(''.list-group-item'').on(''click'', function() { $(''.glyphicon'', this) .toggleClass(''glyphicon-chevron-right'') .toggleClass(''glyphicon-chevron-down''); }); });

Ver en el violinista: https://jsfiddle.net/ann7tctp/