Javascript 隐藏右按钮时，中间引导按钮组中的圆角缺失

我有一个按钮组，有时我需要根据用户交互隐藏最后一个右按钮。如果我隐藏右侧按钮，中间的按钮将失去圆角设计。我想中间的按钮也有圆角时，右边的按钮是隐藏的。在下面的示例中，当用户隐藏右按钮时，

Middle

将失去圆角

html:

JSFIDLE的例子是使用BS4，而我使用BS3。它也有同样的问题。

---

BS3有什么引导类可以解决这个问题吗？提前感谢。

使用

添加/删除类

至

警告

按钮

并将css中的

边框右下半径

和

边框右上半径

设置为此

类

$（“.show”）。单击（函数（）{
$（“.btn危险”）.show（）；
$（“.btn警告”）.removeClass（'hideWarning'）；
});
$（“.hide”）。单击（函数（）{
$（“.btn危险”）.hide（）；
$（“.btn警告”）.addClass（'hideWarning'）；
});
.hideWarning{
边框右下半径：4px！重要；
边框右上角半径：4px！重要；
}



左边
中间的
赖特


显示
隐藏
如果您想使用

<br>
<div class="btn-group" role="group">
<button type="button" class="btn btn-info">Left</button>
<button type="button" class="btn btn-warning">Middle</button>
<button id="right-btn" type="button" class="btn btn-danger">Right</button>
</div>

<br>
<button type="button" class="btn btn-success show">
show
</button>
<button type="button" class="btn btn-success hide">
hide
</button>




var store=$("#right-btn").clone();
var isActive=1;

$( ".show" ).click(function() {
if(isActive === 0){
$( ".btn-group" ).append(store);
isActive=1;
}
});


$( ".hide" ).click(function() {
if(isActive===1){
$( ".btn-danger" ).remove("#right-btn");
isActive=0;
}
});



左边
中间的
赖特


显示
隐藏
var store=$（“#右btn”）.clone（）；
var=1；
$（“.show”）。单击（函数（）{
如果（isActive==0）{
$（“.btn组”）.append（存储）；
isActive=1；
}
});
$（“.hide”）。单击（函数（）{
如果（isActive==1）{
$（“.btn危险”）。移除（“#右侧btn”）；
isActive=0；
}
});

$( ".show" ).click(function() {
  $( ".btn-danger" ).show();
});

$( ".hide" ).click(function() {
  $( ".btn-danger" ).hide();
});

<br>
<div class="btn-group" role="group">
<button type="button" class="btn btn-info">Left</button>
<button type="button" class="btn btn-warning">Middle</button>
<button id="right-btn" type="button" class="btn btn-danger">Right</button>
</div>

<br>
<button type="button" class="btn btn-success show">
show
</button>
<button type="button" class="btn btn-success hide">
hide
</button>




var store=$("#right-btn").clone();
var isActive=1;

$( ".show" ).click(function() {
if(isActive === 0){
$( ".btn-group" ).append(store);
isActive=1;
}
});


$( ".hide" ).click(function() {
if(isActive===1){
$( ".btn-danger" ).remove("#right-btn");
isActive=0;
}
});