Исправление высоты таблицы, не работающее с процентным макетом в стиле начальной загрузки

Я, вероятно, упускаю здесь что-то очевидное, но я заметил странный эффект при изменении гибкого макета на display:table и ячейку таблицы. (как описано здесь, здесь, показано здесь.

Попробуйте добавить ячейки display:table и table-cell к существующему гибкому макету, и строка сожмется и фактически не увеличится в высоту. Например, если вы перейдете на http://odetocode.github.io/bootstrap-samples/samples/bootstrap-layout.html и установите флажки для всех таблиц стилей вверху, затем добавьте пару правил для селекторов в инспекторе:

.row { display:table-row;}

.row >div {display:table-cell;}

и добавьте немного содержимого в одну из ячеек, вы увидите, что это на самом деле не увеличивает высоту, и, как ни странно, добавление display:table или table-row фактически делает строку менее широкой по какой-то причине?

Я вижу какую-то недокументированную функцию таблицы css, или что-то в стиле бутстрапа просто несовместимо с этим типом динамического исправления высоты?

Исправление высоты таблицы не работает с процентным макетом в стиле начальной загрузки


person NoBugs    schedule 22.05.2015    source источник


Ответы (1)


Попробуйте: .row > div {display:table-cell;float:none}

Ячейка таблицы не будет работать должным образом с плавающим элементом.

person user3847276    schedule 29.07.2015
comment
Почему бы и нет? Кроме того, этот float встроен в Bootstrap, по-видимому, для быстрого сворачивания? - person NoBugs; 30.07.2015
comment
Поплавок не имеет ничего общего с откликом; ширина в процентах это то, что это делает. Поплавок заставляет элементы div располагаться рядом друг с другом на одной строке, потому что элементы div являются элементами уровня блока. Но ячейки таблицы являются встроенными элементами, поэтому они будут располагаться рядом друг с другом без плавающей запятой, если вы используете правильные классы col-sm-* для суммирования до 12. - person user3847276; 03.08.2015