Блог

Я создал выпадающую кнопку в группе кнопок, используя следующие строки.

Все работает так, как задумано, единственная проблема заключается в том, что моя выпадающая кнопка показывает закругленные углы с левой стороны и, таким образом, выглядит иначе, чем другие кнопки в группе кнопок.

Поиск в Google выявил это как известную проблему в Bootstrap 2, которая была исправлена в Bootstrap 3 и называется там вложенными группами кнопок.

Однако, может кто-нибудь подсказать мне способ использовать CSS для перезаписи этого в Bootstrap 2, чтобы придать выпадающей кнопке правильный стиль? Мне это нужно только для того, чтобы охватить одну выпадающую кнопку в группе кнопок и только выпадающие кнопки, которые появляются прямо в группе кнопок.

Мой код:

 <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>
 

Попробуйте это…

http://www.bootply.com/glCQBEpadk

просто удалите <div class="btn-group">

Попробуйте добавить это в свой css:

 .btn-group .btn-group .dropdown-toggle {
    border-radius: 0 4px 4px 0;
    margin-left: -1px;
}
 

Смотрите: http://www.bootply.com/ieogxJv04y