Comment faire pour utiliser plusieurs colonnes dans une list-group-item d'un Bootstrap de l'accordéon?

Comment utiliser des colonnes dans la liste des éléments qui augmentent quand un accordéon est ouvert dans le Bootstrap (3)? Je suis en train d'essayer de faire simple, et il suffit d'utiliser la grille de classes dans la liste-groupe-éléments comme vrd, comme dans l'utilisation de la col-sm-3 classe.

Ici est un bootply.

Extrait, l'accordéon list-group-éléments ressembler à ceci:

<div id="One" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-One">
    <div class="list-group">
                 <a class="list-group-item col-sm-3" href="#">a</a>
                <div class="list-group-item col-sm-3">b</div>
                <div class="list-group-item col-sm-3">c</div>
                <div class="list-group-item col-sm-3">d</div>
   </div>
</div>

Le problème, c'est que lorsque les accordéons ouvrir, ils ne reçoivent pas leur hauteur de taille correctement, et s'interpénètrent. J'ai essayé d'ajouter un clearfix div sous chaque liste-groupe, mais il y a d'étranges artefacts avec la première list-group-item frontière, puis.

InformationsquelleAutor Greg | 2015-04-29
  1. 3

    Du bootstrap, documentation

    Lignes doivent être placées à l'intérieur d'un .conteneur (largeur fixe) ou
    .récipient de liquide (pleine largeur) pour un alignement correct et le rembourrage.

    et

    Contenu doit être placé à l'intérieur des colonnes et des colonnes peut être
    les enfants immédiats de lignes.

    Il suffit d'ajouter la ligne et les classes conteneur dans les bons endroits et vous l'aurez.

    Mis à jour bootply - http://www.bootply.com/LQgHemNzZr

    • Qui ressemble un peu comme quand j'ai ajouté clearfix divs. En d'autres termes, la list-group-item lignes étendre au-delà de l'accordéon à l'horizontale et à la verticale pensionnaires sont écrasés. Aussi, la première colonne de la première ligne de chaque liste-groupe semble placez le haut bordure horizontale au bas de la ligne. J'ai effectivement eu l'extérieur du conteneur div déjà, mais je vois que vous faites de l'accordéon utiliser à la fois le panneau-groupe et la liste des cours de groupe. Je vais essayer de mettre quelques explicite ligne divs, pour voir si cela aide à obtenir les colonnes de la durée prévue de leur conteneur parent.
    • Ah! Je vois ce que tu veux dire. Modifier les 3 conteneurs aux conteneur de fluide alors. bootply.com/Sq6PMkM9L9
    • Yep, ça fait beaucoup mieux. Voici donc le résumé. Le parent de l'accordéon nécessaires pour être un groupe, pas une liste de groupe (de ma faute). Pour obtenir des colonnes dans la liste-groupe-éléments, j'ai eu besoin de faire de chaque panneau rétractable utiliser le conteneur de liquide de classe. Aussi, la liste-groupe divs dans chaque panneau nécessaires à l'utilisation de la ligne de classe. Pour fixer la ligne 1, colonne 1 des frontières, j'ai besoin d'insérer un clair-fixer le droit avant la liste de groupe. À ce point, il semble assez bon. Voir le résultat final ici bootply.com/JsrMTohJJT.
    InformationsquelleAutor potatopeelings