Начальная загрузка 4 элементов панели навигации в контейнере, при этом один элемент выровнен по правому краю контейнера

Question

У меня есть навигационная панель Bootstrap 4 с <div class="container">, обернутым вокруг навигационных ссылок, поэтому навигация расположена точно так же, как содержимое моей страницы (которая также находится в контейнере)

Теперь я хочудобавить поисковый ввод вне контейнера, выровненный по правой стороне (видимый только на экранах XL, скрытый в противном случае)

Я знаю, как выровнять вещи, я могу выровнять его внутри контейнера, но создание другого <ul class="navbar-nav"> вне контейнера на самом деле все портит, поэтому я не совсем уверен, как мне это сделать при наличии контейнера в навигационной панели.

Насколько я вижу,это тот факт, что container имеет поле auto и ставит form-inline сразу после того, как контейнер портит поля, даже при использовании float-right

Вот загрузочный лист: https://www.bootply.com/T9Ks167fW7

Answer 1

Пока что я использовал трюк, чтобы встроенная форма использовала position: absolute, таким образом, это не мешает с полем container, поэтому все выглядит хорошо:

<form id="search" class="form-inline">
</form>

#search
{
    position: absolute;
    right: 0;
    margin-right: 1rem;
}