bootlint icon indicating copy to clipboard operation
bootlint copied to clipboard

Warn about .btn class on anchor within nav and navbar

Open zacechola opened this issue 9 years ago • 2 comments

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.

zacechola avatar Nov 15 '14 00:11 zacechola

Error, IMO.

cvrebert avatar Nov 15 '14 00:11 cvrebert

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.

zacechola avatar Nov 15 '14 01:11 zacechola