Проблемы с компоновкой после переноса Bootstrap с 3 по 4 (ширина таблицы, встроенные элементы не расположены вертикально) - PullRequest
Новая
       80

Проблемы с компоновкой после переноса Bootstrap с 3 по 4 (ширина таблицы, встроенные элементы не расположены вертикально)

0 голосов
/ 20 октября 2019

Я перенес простой сайт ASP.NET с Bootstrap 3.2.0 на 4.3.1 (используя bootstrap.min.css и bootstrap.bundle.min.js). Как до, так и после того, как сайт использует jQuery 3.2.1.

, я преобразовал навигационное меню, чтобы оно соответствовало новому дизайну Bootstrap 4, обернул заголовок и основное содержимое в элементы Header и Main и поменял местами все ссылки на Glyphicon. FontAwesome, но в остальном HTML остается прежним.

Теперь у меня есть 2 основные проблемы с макетом:

  1. Таблица (используемая для отображения сетки данных) теперь имеет автоматическийширина 407 пикселей, несмотря на то, что в CSS сказано, что это 100%. В Bootstrap 3 он имел автоматическую ширину 1140 пикселей (на настольном дисплее) и в то же время был 100% в CSS. Другими словами, таблица теперь «сжимается по размеру», а не расширяется, чтобы заполнить доступное пространство.
  2. Над таблицей есть заголовок H1 и кнопка. Теперь они выровнены по горизонтали, а не по вертикали.

Я прочитал документированное руководство по миграции , но я не увидел там ничего, что говорило бы мне, почему я получаю описанное выше поведение.

Bootstrap 3: enter image description here

Bootstrap 4: enter image description here

1 Ответ

0 голосов
/ 01 ноября 2019

Я выяснил проблему в конце ... и это было немного неясным. Надеясь, что это поможет кому-то еще ....

Как видно из приведенного выше снимка экрана, в HTML-коде Bootstrap 4 содержимое, в котором возникла проблема, помещается в DIV с class = "row justify-content-center ".

Класс строки из BS4 и устанавливает display: flex

Это имеет некоторые неожиданные эффекты на дочерние элементы ... по крайней мере, если вы нене понимаю новый режим отображения Flex. Например, даже если дочерние элементы имеют display: block , они ведут себя так, как будто они имеют display: inline . Таким образом, заголовок H1 и кнопка встроены не в стек, а также DIV (после H1), который содержит таблицу, сжимается до минимальной ширины (в результате чего таблица сжимается, так как для нее установлено значение width: 100% ).

Решением было удалить класс строки из DIV, так что это был просто class = "justify-content-center".

...