Bootstrap сработал до того как его "попросили"?

@Alborki · Регистрация: 28.01.2020

Студворк — интернет-сервис помощи студентам

Здравствуйте!

В этом учебном проекте используется react и bootsrap.
Почему до того как мы задали className элементу Bootstrap уже включился и применил свои стили(смотрите первый и второй скрин)?

И почему, когда мы задаем бутстрапный className элементу, то он не применяется(смотрите третий и четвертый скрин)?

Для сравнения, без стилей Bootsrap страничка выглядит как на 5 скрине.

Что я не так настроил?

@Alborki · 03.03.2021, 17:08 **[ТС]**

Может тут путь неправильно указан import 'bootstrap/dist/css/bootstrap.css' ?

Но почему тогда стили Bootstrap по умолчанию применяются, как только эту строчку написать?
Значит правильно...
Или нет?

@NTHing · 04.03.2021, 09:59

Сообщение от Alborki

Но почему тогда стили Bootstrap по умолчанию применяются, как только эту строчку написать?
Значит правильно...
Или нет?

Правильно.

Сообщение от Alborki

Почему до того как мы задали className элементу Bootstrap уже включился и применил свои стили

Bootstrap "включился" потому, что вы его подключили... какие именно стили он применил расшифруйте, пожалуйста...

Сообщение от Alborki

И почему, когда мы задаем бутстрапный className элементу, то он не применяется

Здесь также непонятно, что значит "не применяется"...

И качество скриншотов очень низкое... Плохо видно...

@Alborki · 04.03.2021, 12:21 **[ТС]**

Возможно я озадачен тем, что Chrom у меня отображает стили не так, как Safari автора скрин-каста?
Почему при одинаковом коде, мой приложение отрисовывается не так как у него?
Код я привел уже в одинаковый вид с автором.

Первых два скрина код компонентов, где заданы классы. Т.е. должны включиться стили Bootstrapю
Третий скрин - как рендерится у меня. Четвертый, соответственно, как выглядит у автора.

@NTHing · 04.03.2021, 12:40

Сообщение от Alborki

Почему при одинаковом коде, мой приложение отрисовывается не так как у него?

возможно есть ещё другие стили (кроме бутстрапа), которые подключены...

@Alborki · 04.03.2021, 12:43 **[ТС]**

Вот разве не должен синий button c классом float-right встать в своем контейнере справа?
Но увы..

Надо пойти воздухом подышать, наверное просто невнимательный уже

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 render() {
        const {article} = this.props;
        const body = this.state.isOpen && <section>{article.text}</section>
        return (
            <div className = "card">
                <div className="card-header">
                    <h2 className = "Title">
                        {article.title}
                        <button onClick = {this.handleClick} className="bt btn-primary btn-lg float-right">{this.state.isOpen ? 'Close' : 'Open'}</button>
                    </h2>
                </div>
                <div className="card-body">
                    <h6 className="card-subtitle text-muted">
                        Creation date: {(new Date(article.date)).toDateString()}
                    </h6>
                    {body}
                </div>
            </div>
        );
    }

@gogolik · 04.03.2021, 12:44

Комментарий модератора

Alborki, коды выкладывайте в текстовом виде.

@Alborki · 04.03.2021, 12:45 **[ТС]**

Сообщение от NTHing

возможно есть ещё другие стили (кроме бутстрапа), которые подключены...

Мой файл css пустой. Кроме bootstrap ничего нет
Что еще может мешать.

@NTHing · 04.03.2021, 13:21

Сообщение от Alborki

Вот разве не должен синий button c классом float-right встать в своем контейнере справа?

Какая версия бутстрапа подключена? В 5-й, например, нужно ставить класс float-end...

@Alborki · 04.03.2021, 20:26 **[ТС]**

Я балда.
Знаете почему не все стили bootstrap применялись?

Да потому, что в моей версии bootstrap нет таких стилей, которые применял автор скринкаста с которого я учусь.

Кнопка button не хотела, например, становиться в правый угол родительского контейнера потому, что класса float-right в моей версии bootstrap уже нет, а есть float-end!

И все работает!

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
render() {
        const {article} = this.props;
        const body = this.state.isOpen && <section>{article.text}</section>
        return (
            <div className = "card">
                <div className="card-header">
                    <h2 className = "Title">
                        {article.title}
                        <button onClick = {this.handleClick} className="btn btn-primary btn-lg float-end">{this.state.isOpen ? 'Close' : 'Open'}</button>
                    </h2>
                </div>
                <div className="card-body">
                    <h6 className="card-subtitle text-muted">
                        Creation date: {(new Date(article.date)).toDateString()}
                    </h6>
                    {body}
                </div>
            </div>
        );
    }

Новые блоги и статьи Все статьи Все блоги /
Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .
Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.

@Alborki 38 / 14 / 4 Регистрация: 28.01.2020 Сообщений: 170

	Bootstrap сработал до того как его "попросили"? 03.03.2021, 16:14. Показов 1556. Ответов 9 Метки bootstarp, react (Все метки) Здравствуйте! В этом учебном проекте используется react и bootsrap. Почему до того как мы задали className элементу Bootstrap уже включился и применил свои стили(смотрите первый и второй скрин)? И почему, когда мы задаем бутстрапный className элементу, то он не применяется(смотрите третий и четвертый скрин)? Для сравнения, без стилей Bootsrap страничка выглядит как на 5 скрине. Что я не так настроил? Миниатюры 0

@Alborki 38 / 14 / 4 Регистрация: 28.01.2020 Сообщений: 170
	03.03.2021, 17:08 [ТС]
	Может тут путь неправильно указан import 'bootstrap/dist/css/bootstrap.css' ? Но почему тогда стили Bootstrap по умолчанию применяются, как только эту строчку написать? Значит правильно... Или нет? 0

@Alborki 38 / 14 / 4 Регистрация: 28.01.2020 Сообщений: 170
	04.03.2021, 12:21 [ТС]
	Возможно я озадачен тем, что Chrom у меня отображает стили не так, как Safari автора скрин-каста? Почему при одинаковом коде, мой приложение отрисовывается не так как у него? Код я привел уже в одинаковый вид с автором. Первых два скрина код компонентов, где заданы классы. Т.е. должны включиться стили Bootstrapю Третий скрин - как рендерится у меня. Четвертый, соответственно, как выглядит у автора. Миниатюры 0

Bootstrap сработал до того как его "попросили"?

Решение