Проблема с раскрывающимся меню на панели навигации Bootstrap 4 ⇐ CSS

[Гость]

Я пытался разделить раскрывающееся меню панели навигации на два столбца, но они конфликтуют друг с другом.

Другая проблема: на мобильных устройствах панель поиска остается внизу. И страница не отвечает. Я не знаю, вызвано ли это проблемой с панелью навигации. Любой вклад будет оценен по достоинству. Желаю всем хороших выходных!

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

html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;

}

section {
padding: 70px 0;
border-bottom: 1px dotted #ccc;
}
.grid-example div[class^="col"] {
border: 1px solid white;
background: lightblue;
text-align: center;
padding-top: 8px;
padding-bottom: 8px;
}
.jumbotron {
background-color: lightskyblue;
}
table th {
text-align: center;
}
.table {
margin: auto;
width: 50% !important;
}
.table td {
text-align: center;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
color: #fff;
text-align: center;
background-color: #C0C0C0;
}
a {
color: #f00;
}
a:hover {
color: #0f0;
}

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

Test



[*]







[url=#]Navbar[/url]




[list]

[url=#]Test (current)[/url]

[*]
[url=#]Test[/url]

[*]
[url=#]Test[/url]

[*]
[url=#]
Test
[/url]




[url=#]Test Test Test[/url]
[url=#]Test Test[/url]
[url=#]Test[/url]

[url=#]itemitemitemitem[/url]
[url=#]itemitemitemitemitem[/url]
[url=#]item[/url]




[/list]



Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

[url=#]Learn more[/url]






Test






Place sticky footer content here.

Источник: https://stackoverflow.com/questions/494 ... down-issue