如何使用Bootstrap保持圆角

Ion*_*ian 4 javascript twitter-bootstrap

从下图中 圆角的图像,我想隐藏第二个按钮,

使用javascript,我需要第一个按钮有圆角.

在我使用javascript隐藏第二个按钮后,第一个按钮在右侧有一个矩形形状:

显示后无图像

如果我删除按钮节点,bootstrap会设置圆角,但这没用.

这是我需要的,通过使用javascript:

这就是我需要的

标准的bootstraphtml按钮结构:

<div class="btn-group">
            <button class="btn btn-mini action_select customSelect" id="btn_bulk_action" data-toggle="button" disabled="disabled">Reply<span class="reply2"></span></button>
            <button class="btn btn-mini action_select" data-toggle="button" id="btn_bulk_action_archive" disabled="disabled" style="
    display: none;
">Archive<i class="icon-remove"></i></button>
                    </div>
Run Code Online (Sandbox Code Playgroud)

sli*_*000 5

这是因为您的按钮位于按钮组中,默认情况下,引导程序需要多个按钮.

您应该删除按钮组或修改css以使按钮四舍五入(如果只有一个按钮).

无论如何回答你的问题,通过jquery最简单的方法:

$('.btn-group').removeClass('btn-group');
Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/uVffe/

虽然你可能想再次添加该类,所以我会:

$('.btn-group').addClass('btn-group-single');
Run Code Online (Sandbox Code Playgroud)

CSS:

.btn-group-single > .btn:first-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
Run Code Online (Sandbox Code Playgroud)

然后你可以将来删除它:

$('.btn-group').removeClass('btn-group-single');
Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/uVffe/1/

切换示例:

http://jsfiddle.net/uVffe/3/