Неправильные точки останова в контейнере Vue Bootstrap для жидкости

Мне нужен контейнер, чтобы он занимал 100% доступную ширину до точки останова (max-width). После прочтения официальных документов отзывчивый контейнер жидкости выглядел как идеальный выбор.

Адаптивные контейнеры - это новинка Bootstrap v4.4. Они позволяют указать контейнер шириной 100% (текучий) до тех пор, пока не будет достигнута определенная точка останова, в которой применяется максимальная ширина.

Таблица точек останова из официальных документов, в которой указано, что точка останова md максимум 720 пикселей. Но на самом деле это поведение иное. Во время тестирования я обнаружил, что максимальная ширина container-md установлена ​​на 960 пикселей, если область просмотра больше 992 пикселей.

снимок экрана с активным правилом css на container-md

<b-container fluid="md"> воспроизведенный Codepen

Я неправильно понимаю документы? Есть ли компоненты с описанной выше функциональностью?


person Mihail S    schedule 13.04.2020    source источник
comment
Контейнеры имеют отступ по 15 пикселей слева и справа. Вы можете удалить это заполнение с помощью класса px-0 или удалить его только на md screend и выше с помощью класса px-md-0   -  person Troy Morehouse    schedule 13.04.2020
comment
@TroyMorehouse, который не меняет поведение, описанное в посте   -  person Mihail S    schedule 13.04.2020
comment
Вот ссылка на официальную документацию Bootstrap v4.4.1: getbootstrap.com/docs/ 4.4 / layout / overview / # responsive BootstrapVue использует Bootstrap V4.4.1 SCSS (которые обычно являются точками останова по умолчанию, если вы не настроили SCSS / CSS) github.com/twbs/bootstrap/blob/v4-dev/scss/_grid.scss   -  person Troy Morehouse    schedule 13.04.2020
comment
@TroyMorehouse Еще раз не понимаю, как он отвечает на мой вопрос. Единственное, что мне приходит в голову, это то, что boostrap container-{} и vue-boostrap fluid={} ведут себя одинаково (что также оправдано проверкой правил css, см. Снимок экрана в исходном посте), но формулировка документации vue-boostrap вводит в заблуждение. Напротив, bootstrap не только явно говорит. Например, .container-sm имеет 100% ширину для запуска до достижения точки останова sm, где он будет масштабироваться с помощью md, lg и xl.. Но также предоставляет таблицу, где представлено такое поведение, в отличие от таблицы vue-bootstrap.   -  person Mihail S    schedule 13.04.2020
comment
См. bootstrap-vue.js.org/docs/components/layout#grid -options Обратите внимание, что я публиковал комментарии, а не ответы. Если бы я отвечал полностью, я бы опубликовал ответ ниже. ;)   -  person Troy Morehouse    schedule 13.04.2020
comment
С тех пор я добавил в качестве ответа ссылку на раздел документации, в котором описывается максимальная ширина контейнера для различных точек останова.   -  person Troy Morehouse    schedule 13.04.2020


Ответы (2)


Максимальная ширина контейнера для различных точек останова (при условии, что переменные SCSS по умолчанию) перечислены в документации по макету по адресу https://bootstrap-vue.js.org/docs/components/layout#grid-options

person Troy Morehouse    schedule 13.04.2020

убедитесь, что вы добавили @import "~bootstrap/scss/bootstrap"; в свой custom.scss https://bootstrap-vue.org/docs#using-custom-bootstrap-scss.

Эта работа для меня.

 <b-container :fluid="'md'">
</b-container>

в элементе проверки это должно быть class = container-md

введите описание изображения здесь

person anson    schedule 09.03.2021