I created a dropdown button within a button group using the following lines.
Everything works as intended, the only issue is that my dropdown button shows rounded corners on its left side and thus looks different to the other buttons in the button group.
Searching Google brought this up as kind of a known issue in Bootstrap 2 that has been fixed in Bootstrap 3 and is called nested button groups there.
However, can someone tell me a way to use CSS to overwrite this in Bootstrap 2 to give the dropdown button the proper styling ? I would only need this to cover one dropdown button within a button group and only dropdown buttons that appear right in the button group.
My code:
<div class="btn-group">
<button type="button" class="btn changeView" id="viewR" title="change view">By Region</button>
<button type="button" class="btn changeView" id="viewC" title="change view">By Country</button>
<div class="btn-group">
<a class="btn changeView dropdown-toggle" data-toggle="dropdown" href="#" id="viewS">
More...
<span class="caret"></span>
</a>
<ul class="dropdown-menu pull-right">
<li class="subRegion" id="af"><a href="#">Africa</a></li>
<li class="subRegion" id="as"><a href="#">Asia</a></li>
<li class="subRegion" id="eu"><a href="#">Europe</a></li>
<li class="subRegion" id="na"><a href="#">North America</a></li>
<li class="subRegion" id="oc"><a href="#">Oceania</a></li>
<li class="subRegion" id="sa"><a href="#">South America</a></li>
</ul>
</div>
</div>