Bootstrap 4 migration: Navbar / Nav items align problem

Yii 2.0 Extensions
1

Hi.
I’ve got problem migrating an app to the BS4 with yiisoft/yii2-bootstrap4 extension.
Using the Navbar / Nav widget as follows:

use yii\bootstrap4\Nav;
use yii\bootstrap4\NavBar;

NavBar::begin([
    'brandLabel' => 'Biblioteczka',
    'brandUrl' => Yii::$app->homeUrl,
    'options' => [
        'class' => 'navbar navbar-expand-md navbar-dark bg-dark',
[...]
echo Nav::widget([
    'options' => ['class' => 'navbar-nav ml-auto'],
    'items' => $menuItems,
 ]);
 NavBar::end();

I end up with wrong formatted Navbar (notice that Nav items are not aligned vertically with the brand element, they are moved up):

obraz
obraz1189×128 8.04 KB

I think the issue is related to the Nav widget code which adds the ‘nav’ class to the ‘ul’ html markup:

So, the produced code has extra ‘nav’ class, besides the ones I specified in ‘options’:

<ul id="w3" class="navbar-nav ml-auto nav">
<li class="nav-item"> 
[...]

But looking to the BS4 docs: https://getbootstrap.com/docs/4.0/components/navbar/ the ‘ul’ markup has to have only the ‘navbar-nav’ class.

Of course I can simply fix it overriding the Nav::Init method but maybe I overlooked something? Has the extra ‘nav’ class to be there for some reasons?

2

Looks like a bug. Please make a pull request.

3

I made PR at first being convinced the problem lies in the wrong extra .nav class in the Nav element.
Today I checked it again and found that the behavior is caused by the logout button CSS style defined in web/css/site.css file:

/* align the logout "link" (button in form) of the navbar */
.nav li > form > button.logout {
    padding: 15px;
    border: none;
}

This ‘padding: 15px’ interferes with the other nav elements which have 0.5rem padding.

The fix is fairly simple but maybe I’ve made a mistake during BS4 extension installation? Should be this style overridden by some asset registered by extension itself?

4

Please, how to do pull right the nav items.