ReactBootstrap css Проблемы при импорте bootstrap.min.css

Я создаю веб-сайт React с помощью ReactBootstrap. Я сделал Navbar и Carousel с помощью ReactBootstrap и компонента Footer.js с MdBootstrap. После того, как я импортировал Bootstrap.min.css в свой Footer.js, Carousel.jsx и CustomNavbar, jsx больше не имеют полной ширины.

Вот мой Footer.js

Вот скриншот панели навигации и карусели

Вот скриншот нижнего колонтитула

Может быть, bootstrap.min.css в моем Footer.js перезаписывает ссылку bootstrap.min.css в index.html? Я действительно не знаю решения.

Может ли кто-нибудь помочь мне?

Спасибо,

Ник


reactjs react-bootstrap
person Nico90    schedule 16.04.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Это потому, что вы используете контейнер, не устанавливая его в жидкость.

Вы можете ознакомиться с документацией по начальной загрузке здесь

Вам просто нужно добавить className из container-fluid.

Из документов:

Контейнеры являются самым основным элементом макета в Bootstrap и необходимы при использовании нашей системы сеток по умолчанию. Выберите отзывчивый контейнер с фиксированной шириной (что означает, что его максимальная ширина изменяется в каждой точке останова) или контейнер с изменяемой шириной (что означает, что он всегда имеет ширину 100%).

Используйте .container-fluid для полноразмерного контейнера, охватывающего всю ширину области просмотра.

person Matan Bobi    schedule 16.04.2018
comment
Привет @Matan Bobi, спасибо за ваш ответ, я добавил className=container-fluid в некоторые части, но без изменений :( вот скриншот: imgur.com/uqKCw18 - person Nico90; 16.04.2018
comment
@ Nico90 Это потому, что className="container-fluid" используется только для элемента Container. для жидкости Navbar вам нужно указать fluid=true на компоненте. вы можете посмотреть документы здесь: react-bootstrap.github.io/components/navbar - person Matan Bobi; 16.04.2018
comment
Привет @Matan Bobi, я получил лучший результат, добавив true, как вы можете видеть на этом снимке экрана imgur.com/tEZSG99 вот моя навигация и карусель сейчас не понял куда писать. Если я пишу в строках жидкость=true, я тоже получаю ошибки. - person Nico90; 16.04.2018
comment
fluid={true} следует устанавливать только для элемента Navbar, а не для всех его дочерних элементов. - person Matan Bobi; 16.04.2018
comment
вот мой код сейчас imgur.com/ynDPNTJ, но на панели навигации никаких изменений. Теперь у меня нет сообщений об ошибках. - person Nico90; 16.04.2018
comment
Попробуйте обернуть его контейнером с fluid={true} - person Matan Bobi; 16.04.2018
comment
вот мой код imgur.com/QA0po33. У меня есть дополнение, как вы можете видеть здесь imgur.com/vUDublr - person Nico90; 16.04.2018
comment
@Nico90 взгляните на это: stackoverflow.com/questions/25427407/ Кстати, это, вероятно, другой вопрос. вопрос, который вы изначально задали, был решен, поэтому в этом случае вам следует открыть новый вопрос, если вы еще не нашли ответ. Если я ответил на ваш вопрос, пожалуйста, отметьте его как ответ для последующего поиска - person Matan Bobi; 16.04.2018
comment
Хорошо, теперь мне нужно исправить панель навигации, чтобы она отображала элементы в строке и удаляла отступы справа и слева. Для этого я открыл новую тему. Спасибо за помощь. Нико - person Nico90; 16.04.2018
comment
здесь ссылка: stackoverflow.com/questions/49863465/ - person Nico90; 16.04.2018