javascript - How to keep round corners using Bootstrap - Stack Overflow

admin管理员组

文章数量:1426072

From the following image , I want to hide the second button,

using javascript, and I need for the first button to have round corners.

After I hide the second button using javascript, the first button has a rectangular shape on the right side:

If I delete the button node, bootstrap sets the rounded corners, but this is not useful.

This is what i need, by using javascript:

The standard bootstrap html button structure:

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

From the following image , I want to hide the second button,

using javascript, and I need for the first button to have round corners.

After I hide the second button using javascript, the first button has a rectangular shape on the right side:

If I delete the button node, bootstrap sets the rounded corners, but this is not useful.

This is what i need, by using javascript:

The standard bootstrap html button structure:

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

• javascript
• twitter-bootstrap

Share Improve this question Follow edited May 21, 2013 at 10:31 fullybaked 4,12711 gold badge2525 silver badges3737 bronze badges asked May 21, 2013 at 10:25 Ionut Flavius PogacianIonut Flavius Pogacian 4,8111515 gold badges6262 silver badges101101 bronze badges 2

• do you need the archive button at all or are you just showing or hiding it depending on what's happening on your page? I imagine the right side of the reply button isn't rounded because it's in a group so if you don't need the archive button, get rid of the group, if you do need archive then you could maybe hide the group and show a reply button that isn't in a group or apply border radius to it via jquery/javascript when archive is hidden? – martincarlin87 Commented May 21, 2013 at 10:33
• i need to show it or hide it depending on whats happening on the page – Ionut Flavius Pogacian Commented May 21, 2013 at 10:33

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

It's because your buttons are in a button group, and by default bootstrap expects more than one button.

You should either remove the button group or modify the css to round the button if there is only one.

Anyway to answer your question, the simplest way via jquery:

$('.btn-group').removeClass('btn-group');

http://jsfiddle/uVffe/

Although you might want to add the class back in again so I would:

$('.btn-group').addClass('btn-group-single');

CSS:

.btn-group-single > .btn:first-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

Then you can remove it in the future:

$('.btn-group').removeClass('btn-group-single');

http://jsfiddle/uVffe/1/

A toggle example:

http://jsfiddle/uVffe/3/

本文标签： javascriptHow to keep round corners using BootstrapStack Overflow