@include box-shadow($dropdown-box-shadow);
@include media-breakpoint-up(md) {
- // stylelint-disable declaration-no-important
- right: 0 !important; // Override inline style
- left: auto !important; // Override inline style
- // stylelint-enable declaration-no-important
width: 400px;
}
}
<nav class="bd-subnavbar pt-2 pb-3 pb-md-2">
<div class="container-xl d-flex align-items-md-center flex-wrap">
- <div class="d-flex align-items-center mr-sm-auto order-2 order-md-0">
- {{ partial "docs-versions" . }}
- </div>
-
- <form class="bd-search d-flex align-items-center mb-2 mb-md-0">
+ <form class="bd-search mb-2 mb-md-0 mr-auto">
<input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-docs-version="{{ .Site.Params.docs_version }}">
</form>
+ {{ partial "docs-versions" . }}
+
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3 order-3 ml-auto" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
{{ partial "icons/menu.svg" (dict "width" "30" "height" "30") }}
</button>
<div class="dropdown">
- <button class="btn btn-bd-light dropdown-toggle" id="bd-versions" data-toggle="dropdown" aria-expanded="false">
+ <button class="btn btn-bd-light dropdown-toggle" id="bd-versions" data-toggle="dropdown" aria-expanded="false" data-display="static">
Bootstrap v{{ .Site.Params.docs_version }}
</button>
<div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">