Bootstrap 2 3 2 Как оформить ряд со спанами визуально как таблицу?

Question

[mr_blond97]

Bootstrap 2 3 2 Как оформить ряд со спанами визуально как таблицу? Задача сделать таблицу, и самое простое решение сделать ее как обычную таблицу. Вот так она выглядит:

Я хочу, чтобы при маленькой ширине экрана ячейки таблицы выстраивались по вертикали. Делаю это с помощью row-fluid и 4 span3. Получаются дефолтные отступы между спанами. Применяю к ним margin: 0px 0px 0px 0px. Отступов нет, выглядит почти как нужно, но теперь все спаны не по-центру, а сдвинуты влево на величину этих маржинов. Как это исправить? Возможно вы знаете как сделать по-другому и лучше?

Answer 1

[Вадим Белкин]

Стандартными средствами bootstrap никак. По-любому придётся свои стили дописывать.

Comments

[mr_blond97]

я понимаю) может есть какие-нибудь идеи что в CSS можно еще описать?

[Вадим Белкин]

Высота ячеек у вас фиксированная или в зависимости от контента? Вы группируете в row-fluid по 4 span3 или сразу все span3 в один row-fluid?

[mr_blond97]

Высоту планирую min-height, т.е. зависит от контента, но минимальная должна быть фиксированной. Если правильно понял, то группирую так - сколько рядов, столько и row-fluid, в каждом ряде 4 спана rghost.ru/6gtg77SLN/image.png

[Вадим Белкин]

Если у вас высота ячеек будет в зависимости от контента, то лучше использовать table-cell для них (или flex, но у него поддержка старых отсутствует).

Вам нужно ввести новый подкласс для row и дочерних ячеек. На маленьких экранах у них будут блочные параметры. А на тех экранах где нужно сетка нужно для ячеек сделать display: table-cell, чем самым они будут автоматически по высоте подстраиваться под самый большой блок. Минус в том что при менее 4 ячейках они будут делить родительскую ширину на имеющееся кол-во ячеек.