Menu
Trying to align badges to the right of each drop-down menu. Currently, the badges look like so:
with the associated code:
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown ">
<a data-target="/business" href="/business" class="dropdown-toggle" data-toggle="dropdown">Business<b class="caret"></b></a>
<ul class="dropdown-menu">
<li >
<a href="/economy">Economy <span class='badge' today: 2</span></a>
</li>
<li >
<a href="/financials">Financial Reports <span class='badge' today: 78</span></a>
</li>
<li >
<a href="/interest">Interest Rates </a>
</li>
</ul>
</li>
</ul>
</div>
adding 'pull-right' to the badge class () causes the badges to collapse:
Also, using boostrap3, with the bootswatch cosmo template (in case that's relevant). Any ideas here?
785
Use the w3-right class to float the dropdown to the right, and use CSS to position the dropdown content (right:0 will make the dropdown menu go from right to left).
Solution : The dropdown should be toggled via data attributes or using javascript. In the above program, we have forgotten to add a data attribute so the dropdown is not working. So add data-bs-toggle="dropdown" to toggle the dropdown.
ml-auto class in Bootstrap can be used to align navbar items to the right. The . ml-auto class automatically aligns elements to the right.
To right-align a menu, use . dropdown-menu-right.
You have missing closing > on the SPAN tags, your class name uses ' not " and your data-target attribute has an invalid leading slash (at least these were what I discovered when I tested it). The only way I could get it to work was a combination of fixed width for the parent UL, along with right-floated ("pull-right") badge spans.
The following tested successfully in Firefox and Chrome under Twitter-Bootstrap 3:
<li class="dropdown ">
<a data-target="business" href="/business" class="dropdown-toggle" data-toggle="dropdown">Business<b class="caret"></b></a>
<ul class="dropdown-menu" style="width:250px;">
<li>
<a href="/economy"><span class="badge pull-right">today: 2</span>Economy</a>
</li>
<li>
<a href="/financials"><span class="badge pull-right">today: 78</span>Financial Reports</a>
</li>
<li>
<a href="/interest">Interest Rates </a>
</li>
</ul>
</li>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
