Как использовать несколько столбцов в элементе списка-списка аккордеона Bootstrap?

Как использовать столбцы в элементах списка, которые расширяются, когда аккордеон открывается в Bootstrap (3)? Я пытаюсь сохранить его простым и просто использовать классы сетки в элементах списка-группы как divs, как и при использовании класса col-sm-3.Как использовать несколько столбцов в элементе списка-списка аккордеона Bootstrap?

Адрес bootply.

Выдержки, Аккордеон список-группа-элементы выглядеть следующим образом:

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

Беда в том, что когда аккордеоны открыты, они не получают их высота размера должным образом, и кровь друг в друга. Я попытался добавить div clearfix под каждой группой списков, но есть некоторые странные артефакты с первой границей списка-группы.

источник

2015-04-29 Greg

Из начальной загрузки документации

Строки должны быть размещены в пределах .container (фиксированной ширины) или .container-жидкости (полной ширины) для правильного выравнивания и заполнения.

Контент должен быть размещен внутри колонны, и только столбцы могут быть непосредственными потомками строк.

Просто добавьте классы строк и контейнеров в нужные места, и вы их получите.

Обновлено bootply - http://www.bootply.com/LQgHemNzZr

источник

2015-04-30 10:02:25 potatopeelings

Это выглядит примерно как когда я добавил clearfix дивы. Другими словами, строки списка-списка элементов выходят за пределы аккордеона горизонтально, а вертикальные границы перезаписываются. Кроме того, первый столбец в первой строке каждой группы списка помещает верхнюю горизонтальную границу в нижней части строки. На самом деле у меня уже был внешний контейнер div, но я вижу, что вы использовали аккордеон как для групповых, так и для групповых классов. Я попробую положить некоторые явные разделители строк, чтобы увидеть, помогает ли этим столбцам их ожидаемый родительский контейнер. – Greg

Ах! Я понимаю что ты имеешь ввиду. Затем измените 3 контейнера на контейнерную жидкость. http://www.bootply.com/Sq6PMkM9L9 – potatopeelings

Да, это намного лучше. Итак, вот резюме. Родительский аккордеон должен был быть групповой группой, а не группой списков (моя опечатка). Чтобы получить столбцы в элементах списка-списка, мне нужно было сделать каждую сворачиваемую панель классом контейнер-жидкость. Кроме того, для каждой группы элементов для каждой группы необходимо использовать класс строк. Чтобы исправить строки 1, границы столбца 1, мне нужно было вставить исправление прямо перед группой списка. В этот момент он выглядит достаточно хорошо. Посмотрите конечный результат здесь: http://www.bootply.com/JsrMTohJJT. – Greg

Как использовать несколько столбцов в элементе списка-списка аккордеона Bootstrap?

ответ

Смежные вопросы