Bootstrap Navbar обрезается, а не форматируется в разных точках обзора ⇐ CSS

[Anonymous]

Я пытаюсь создать заголовок страницы с особыми требованиями к изображению баннера, в дизайне которого есть 4 перекрестные линии вместе с логотипом.
Изображение: https:/ /sample.tiiny.site/resources/home-banner-bg.png
Мне нужно поместить часть текста на темно-синюю полосу, а часть — на голубую полосу. чтобы они были выровнены по изображению в левом логотипе.

Код: Выделить всё

[*]




.nav-link {
color: #ffffff;
text-transform: uppercase !important;
}

body {
padding-top: 0px;
margin-top: 0px;
}

.carousel-caption {
bottom: 0rem;
right: -15rem;
left: 30rem;
z-index: 999;
/*z-index: 0;*/
}









[url=/sell-your-boat]
[img]https://sample.tiiny.site/resources/home-banner-bg.png[/img]
[/url]











[list]

[url=#]Home[/url]

[*]
[url=#]Features[/url]

[*]
[url=#]Pricing[/url]

[url=#]List 1[/url]
[*][url=#]List 2[/url]
[*][url=#]List 3[/url]
[*][url=#]List 4[/url]
[*][url=#]List 5[/url]
[*][url=#]List 6[/url]
[*][url=#]List 7[/url]
[/list]


[*]
[url=#]
Products
[/url]
[list]
[url=#]List 1[/url]
[*][url=#]List 2[/url]
[*][url=#]List 3[/url]
[*][url=#]List 4[/url]
[*][url=#]List 5[/url]
[*][url=#]List 6[/url]
[*][url=#]List 7[/url]
[/list]








Elevate your app development with .NET 8.

Fully-featured integrated development environment (IDE) on Windows for building every type of .NET application.

Develop on Linux, macOS, or Windows to build cross-platform websites and services.  Install the C# Dev Kit to get the best experience.








Table with Background Image




 










[list]
[*]
[url=#]Home[/url]

[*]
[url=#]Features[/url]

[*]
[url=#]Pricing[/url]

[url=#]List 1[/url]
[*][url=#]List 2[/url]
[*][url=#]List 3[/url]
[*][url=#]List 4[/url]
[*][url=#]List 5[/url]
[*][url=#]List 6[/url]
[*][url=#]List 7[/url]
[/list]


[*]
[url=#]
Products
[/url]
[list]
[url=#]List 1[/url]
[*][url=#]List 2[/url]
[*][url=#]List 3[/url]
[*][url=#]List 4[/url]
[*][url=#]List 5[/url]
[*][url=#]List 6[/url]
[*][url=#]List 7[/url]
[/list]













Elevate your app development with .NET 8.

Fully-featured integrated development environment (IDE) on Windows for building every type of .NET application.

Develop on Linux, macOS, or Windows to build cross-platform websites and services. Install the C# Dev Kit to get the best experience.

Подход 1. Я пробовал использовать карусель и разместите текст поверх него с помощью карусели-заголовка. Проблема в том, что разные экранные тексты выглядят не очень хорошо. Кроме того, если выпадающий список на панели навигации отключен, я вижу, что ограничение раскрывающегося списка ограничивается только областью карусели. тогда как у меня более длинные раскрывающиеся списки.
Подход 2. Я пробовал использовать таблицу с изображением на заднем плане, но не смог расположить текст, он продолжает перекрываться с Изображение. Кроме того, проблема с раскрывающимся меню на панели навигации по-прежнему сохраняется.
Пожалуйста, посоветуйте, как лучше всего с этим справиться. Я разместил здесь образец. Также у меня есть полный код во фрагменте кода.
https://sample.tiiny.site/

Блокировка


Подробнее здесь: https://stackoverflow.com/questions/785 ... viewpoints