Пользовательская кнопка загрузки Bootstrap появляется только при зависании

Question

В настоящее время я разрабатываю веб-страницу с помощью бутстрапа. Мне нужен был обычай цвет кнопки, поэтому я разработал свои собственные классы кнопок, которые вы можете увидеть здесь:

.btn.btn-radio { 
    background: #f3bb70; 
    border-color: transparent; 
    border-right-color: #684235; 
} 

.btn.btn-plus { 
    background: #684235; 
    border-color: transparent; 
} 

Поскольку кнопка группы того же цвета, я хотел поставить границу только на правой стороне, чтобы показать разделение. Но граница появляется только тогда, когда мышь находится над кнопкой (см. https://jsfiddle.net/DTcHh/20757/). Почему это так ? Как я могу быть там все время?

Answer 1

Эта проблема имеет отношение к г-индекса кнопок так, чтобы решить эту проблему без смешения с запасом вам нужно поставить границы для всех кнопок затем удалите первый РЕБЕНОК левой границы

.btn.btn-radio { 
    background: #f3bb70; 
    border-color: transparent; 
    border-right-color: #684235; 
    border-left-color: #684235; 
} 
.btn.btn-radio:first-child{ 
    border-left-color: transparent; 
} 

.btn.btn-plus { 
    background: #684235; 
    border-color: transparent; 

} 

Answer 2

Bootstrap имеет эту строку в css. Это создает проблему.

.btn-group .btn+.btn, .btn-group .btn+.btn-group, .btn-group .btn-group+.btn, .btn-group .btn-group+.btn-group { 
     margin-left: -1px; 
} 

Вы можете использовать это, но я DANT знать, если он не будет делать какие-то другие проблемы:

.btn.btn-radio { 
    background: #f3bb70; 
    border-color: transparent; 
    border-right-color: #684235; 
    margin-left: 0!important; 
} 

Answer 3

вам придется переопределить .btn в bootstrap.css файл

в настоящее время он имеет

border:1px solid transparent; и, следовательно, ваша граница не показывая нормально