CSS flexbox не работает должным образом после подключения Bootstrap 4 CDN - PullRequest
Новая
       8

CSS flexbox не работает должным образом после подключения Bootstrap 4 CDN

0 голосов
/ 10 апреля 2020

Я использую CSS flexbox, чтобы сделать заголовок моей страницы с display: flex; Каким-то образом, когда я связываю Bootstrap 4 CDN ссылку с моим HTML, flexbox не ' t ведут себя как flexbox и разные div внутри flexbox сводятся к разным строкам. Пожалуйста, помогите мне. Спасибо.

Ответы [ 2 ]

0 голосов
/ 10 апреля 2020

Ваш пользовательский CSS class теперь конфликтует с Bootstrap -4 CSS class. Если вы хотите избежать этого конфликта, вы должны сделать следующее:

  1. Сначала добавьте Bootstrap -4 CDN, а затем свой пользовательский CSS. Он будет перезаписан bootstrap CSS по умолчанию CSS.

Пример: 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="your-custom.css" />
<!-- Your custom CSS -->
Если вышеуказанное решение не устранило вашу проблему go в html измените bootstrap class на пользовательский class.

Пример: 

<nav class="navbar"></nav>
<!--  -->

Выше класса зарезервированы bootstrap. Если выше class конфликт с вашим .navbar class, пожалуйста, измените это class. 

<nav class="my-navbar"></nav>
<!-- OR -->
<nav class="navbar my-navbar"></nav>
Если указанное выше решение не работает, используйте !important после свойства CSS. Он будет перезаписан bootstrap CSS по заказу CSS.

Пример: 

.navbar{
    display: flex !important;
}

Примечание: старайтесь избегать !important CSS собственность. Используйте новый class для перезаписи bootstrap CSS.

0 голосов
/ 10 апреля 2020

Вероятно, ваш css отменен css из bootstrap. Поскольку вы используете CDN, вы не можете изменить bootstrap css.

. Я предлагаю вам добавить '! Important' к стилю заголовка, чтобы посмотреть, не переопределит ли это BS css. * 1003. *

Вы можете проверить, какие стили используются, глядя на вашу страницу в Chrome, нажмите F12. Выберите вкладку «Элементы». Выберите заголовок слева и проверьте стили справа. Он покажет вам, какие стили используются.

...