Шапка страницы html + bootstrap 5

@Andrey Gorlov · Регистрация: 10.04.2023

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

HTML5    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Andrey's portfolio</title>
    <!-- Подключаем Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
 
<!--    <script src="delete.js"></script>-->
 
    <style>
        /* Стили для подвала */
        .footer {
            background-color: #000;
            color: #fff;
            text-align: center;
            padding: 40px;
            height: 100px;
        }
 
        /* Стили для текста в подвале */
        .footer p {
            margin-bottom: 0;
            font-size: 16px;
        }
 
        /* Стили для текста */
        h1 {
            text-align: center;
        }
 
        h2 {
            text-align: center;
        }
 
        /*h3 {*/
        /*    text-align: center;*/
        /*}*/
 
        #tegiphone {
            text-align: center;
        }
 
        /* Стили для заголовка в шапке */
        /*.header h1 {*/
        /*    font-size: 25px;*/
 
        /*}*/
 
        .ugol {
            border-radius: 33px;
        }
 
        .sumachedshiychatgpt {
            display: flex;
            justify-content: center;
            align-items: center;
        }
 
        #threetexttegiphone {
            text-align: center;
        }
    </style>
</head>
<body style="background-color: #f5f5f5;">
<!--    <div class="header">-->
<!--        <h5 style="float:left; margin-right:20px;">Портфолио</h5>-->
<!--        <h1>Горлов Андрей Викторович</h1>-->
<!--    </div>-->
 
 
[B][U]ПРОБЛЕМА[/U][/B]
 
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
        <div class="container-fluid">
            <p href="" class="navbar-brand">Портфолио: <b>Горлов Андрей Викторович</b></p>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
 
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a href="" class="nav-link">Обо мне</a>
                </li>
                <li class="nav-item">
                    <a href="" class="nav-link">Мои проекты</a>
                </li>
                <li class="nav-item">
                    <a href="" class="nav-link">Об этом сайте</a>
                </li>
            </ul>
        </div>
    </nav>
    <br>
    <br>
    <br>
    <br>
    <h1>Веб-сайты</h1>
 
 
 
    <div class="container px-4">
        <div class="row">
            <div class="col-12 bg-primary bg-gradient text-white ugol p-3">
                <h3 id="tegiphone">Сайт про модели IPhone</h3>
                <div class="container">
                    <div class="row">
                        <div class="col-12 bg-warning bg-gradient text-white ugol p-3">
                            <a href="#"></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <br>
        <div class="row gx-5">
            <div class="col-12 col-lg-4 bg-success bg-gradient text-white p-3 border sumachedshiychatgpt ugol">
                <div class="container">
                    <div class="row">
                        <div class="col-12 bg-info bg-gradient text-white ugol p-3">
                            <h5 id="threetexttegiphone">На нём есть 3 страницы:</h5>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-12 bg-warning bg-gradient text-white ugol p-3">
                            <ol>
                                <li>Введение</li>
                                <li>Все модели</li>
                                <li>Причина ухода с рынка России</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-8 bg-danger bg-gradient text-white p-3 border ugol">
                <p>Веб-сайт выполнен в серых цветах. На страницах есть шапка и прозрачный подвал с ссылкой на официальный сайт Apple.</p>
                <p>Все страницы абсолютно адаптивны, если открывать сайт на разных устройствах, он везде будет выглядеть красивым.</p>
                <p>Сайт написан с помощью языка программирования Python, который сейчас самый лучший для разработки веб-сайтов.</p>
                <p>Ещё вместе с Python были использованы фреймворки Flask, а также Bootstrap, он нужен, чтобы всё было еще красивей и адаптивным.</p>
                <p>А вёрстка сайта происходила с помощью языка гипертекстовой разметки (HyperText Markup Language) - HTML и языка каскадных стилей (Cascading Style Sheets) - CSS.</p>
            </div>
        </div>
    </div>
 
    <br>
 
 
 
    <div class="footer">
        <p>Телефон: +7(906)566-25-14 | Почта: gorlov.andrey.02.02.2009@gmail.com</p>
    </div>
 
    <!-- Подключаем Bootstrap JS и jQuery -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
 
</body>
</html>

Проблема такова: ссылки шапки профиля отображаются столбиками, а не линией. Помогите пожалуйста исправить этот баг

Новые блоги и статьи Все статьи Все блоги /
Мульти-тенантные БД с PostgreSQL Row Security Codd 23.04.2025 Современные облачные сервисы и бизнес-приложения всё чаще обслуживают множество клиентов в рамках единой программной инфраструктуры. Эта архитектурная модель, известная как мульти-тенантность, стала. . .	Реализация конвейеров машинного обучения с Python и Scikit-learn AI_Generated 23.04.2025 Мир данных вокруг нас растёт с каждым днём, и умение эффективно обрабатывать информацию стало необходимым навыком. Специалисты по машинному обучению ежедневно сталкиваются с задачами предобработки. . .	Контроллеры Kubernetes Ingress: Сравнительный анализ Mr. Docker 23.04.2025 В Kubernetes управление входящим трафиком представляет собой одну из ключевых задач при построении масштабируемых и отказоустойчивых приложений. Ingress — это API-объект, который служит вратами. . .	Оптимизация кода Python с Cython и Numba py-thonny 23.04.2025 Python прочно обосновался в топе языков программирования благодаря своей простоте и гибкости. Разработчики любят его за читабельность кода и богатую экосистему библиотек. Но у этой медали есть и. . .	Микросервис на Python с FastAPI и Docker ArchitectMsa 23.04.2025 В эпоху облачных вычислений и растущей сложности программных продуктов классическая монолитная архитектура всё чаще уступает место новым подходам. Микросервисная архитектура становится фаворитом. . .
Создаем веб-приложение на Vue.js и Laravel Reangularity 23.04.2025 Выбор правильного технологического стека определяет успех веб-проекта. Laravel и Vue. js формируют отличную комбинацию для создания современных приложений. Laravel — это PHP-фреймворк с элегантным. . .	Максимальная производительность C#: Span<T> и Memory<T> stackOverflow 22.04.2025 Мир высоконагруженных приложений безжалостен к неэффективному коду. Каждая миллисекунда на счету, каждый выделенный байт памяти может стать причиной падения производительности. Разработчики на C#. . .	JWT аутентификация в Java Javaican 21.04.2025 JWT (JSON Web Token) представляет собой открытый стандарт (RFC 7519), который определяет компактный и самодостаточный способ передачи информации между сторонами в виде JSON-объекта. Эта информация. . .	Спринты Agile: Планирование, выполнение, ревью и ретроспектива EggHead 21.04.2025 Спринты — сердцевина Agile-методологии, позволяющая командам создавать работающий продукт итерационно, с постоянной проверкой гипотез и адаптацией к изменениям. В основе концепции спринтов лежит. . .	Очередные открытия мега простых чисел, сделанные добровольцами с помощью домашних компьютеров Programma_Boinc 21.04.2025 Очередные открытия мега простых чисел, сделанные добровольцами с помощью домашних компьютеров. 3 марта 2025 года, в результате обобщенного поиска простых чисел Ферма в PrimeGrid был найден. . .