diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html index c10bea4d3e..ebeb0d8280 100644 --- a/docs/_includes/docs-nav.html +++ b/docs/_includes/docs-nav.html @@ -121,6 +121,9 @@
  • Basic navbar
  • Nav links
  • Forms in navbars
  • +
  • Buttons in navbars
  • +
  • Component alignment
  • +
  • Text in navbars
  • Fixed top navbar
  • Fixed bottom navbar
  • Static top navbar
  • diff --git a/docs/docs.html b/docs/docs.html index 2b922b695d..e4f7113818 100644 --- a/docs/docs.html +++ b/docs/docs.html @@ -3522,13 +3522,19 @@ For example, <section> should be wrapped as inline. {% endhighlight %} -

    Component alignment

    + +

    For buttons not residing in a <form>, add this class to vertically center buttons within a navbar.

    +
    + +
    + +

    Align nav links, search form, or text, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.

    -

    Using dropdowns

    -

    Add dropdowns and dropups to the nav with a bit of markup and the dropdowns JavaScript plugin.

    - -

    Text

    +

    Wrap strings of text in an element with .navbar-text, usually on a <p> tag for proper leading and color.

    diff --git a/less/navbar.less b/less/navbar.less index 88cb33bce3..9511670cd5 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -299,6 +299,15 @@ } + +// Buttons in navbar +// +// Vertically center a button within a navbar (when *not* in a form). + +.navbar-btn { + margin-top: ((@navbar-height - @input-height-base) / 2); +} + /* // Janky solution for now to account for links outside the .nav @@ -310,17 +319,4 @@ } } -// Buttons in navbar -// ------------------------- -.navbar .btn, -.navbar .btn-group { - .navbarVerticalAlign(30px); // Vertically center in navbar -} -.navbar .btn-group .btn, -.navbar .input-prepend .btn, -.navbar .input-append .btn { - margin-top: 0; // then undo the margin here so we don't accidentally double it -} - - */