bootlint
bootlint copied to clipboard
Warn about .btn class on anchor within nav and navbar
From the docs:
While button classes can be used on
<a>
and<button>
elements, only<button>
elements are supported within our nav and navbar components.
Not sure if this one should be a warning or an error.
Error, IMO.
Almost finished working on this one, but I need some clarification.
.navbar-nav a.btn.btn-*
is an error.
.navbar-nav button.btn.btn-*
is not.
What about this? (vertical alignment breaks)
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<a class="btn btn-default" href="/">Brand</a>
</div>
</nav>
Or in a situation where .navbar-btn
is introduced? (fixes alignment)
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<a class="btn btn-default navbar-btn" href="/">Brand</a>
</div>
</nav>
I guess my confusion comes more from the seeming strictness in the section that introduced .navbar-nav
Like the standard button classes,
.navbar-btn
can be used on<a>
and<input>
elements. However, neither.navbar-btn
nor the standard button classes should be used on<a>
elements within.navbar-nav
.