Я придумал решение для этого, это не самое чистое, что я сделал, но, возможно, оно будет работать для вас, я не использовал flexbox для этого, чтобы вы могли удалить .main css, прежде всего все нужно переместить элемент .login-widget внутри тега nav, сделав так, чтобы он выглядел так, как вы хотите для рабочего стола.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar Logo</a>
<div class="collapse navbar-collapse justify-content-end" id="navbarText">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
<div class="login-widget">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Log In
</button>
<div class="dropdown-menu dropdown-menu-right">
<form class="px-4 py-3">
<div class="form-group">
<label for="exampleDropdownFormEmail1">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword1">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck">
<label class="form-check-label" for="dropdownCheck">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">New around here? Sign up</a>
<a class="dropdown-item" href="#">Forgot password?</a>
</div>
</div>
</nav>
Но у нас будет проблема на мобильных устройствах, когда вы нажмете на меню гамбургера в div .login-widget, он будет выровнен с другими навигационными элементами меню,
нарушая ваш макет, так что, что я делаю, чтобы это исправить, это дает .login-widget абсолютную позицию
.login-widget{
position: absolute;
right: 16px;
top: 4px;
}
, что сделает трюк для .login-widget, но теперь у нас есть другая проблема .navbar-brand не отцентрирован, поэтому, что я делаю, чтобы исправить это, снова использует абсолютную позицию
.navbar-brand{
position: absolute;
top: 8px;
right: calc(109px + 16px);
left: calc(56px + 16px);
text-align: center;
}
и, наконец, вы должны обернуть эти классы в медиа-запрос, чтобы сбросить значения для рабочего стола.
@media only screen and (min-width: 992px){
.login-widget{
position: static;
right: auto;
top: auto;
}
.navbar-brand{
position: static;
top: auto;
right: auto;
left: auto;
text-align: left;
}
}
Здесь у вас есть кодовый блок, если вы хотите его протестировать, дайте мне знать, если это то решение, которое вы ищете!