Twitter Bootstrap button-group as text input add-on isn't so nice

Question

This is what I've tried:

<div class="input-prepend input-append">
    <input type="text" />
        <div class="add-on btn-group" data-toggle="buttons-radio">
            <button type="button" class="btn btn-primary" dir="ltr">http://</button>
            <button type="button" class="btn btn-primary" dir="ltr">https://</button>
        </div>
</div>

but the group-button's padding and margin made it ugly! you can see it in jsFiddle

How can I fix it?

Answer 1

Try changing your code to this:

<div class="input-prepend input-append">
<div class="btn-group" data-toggle="buttons-radio">
    <button type="button" class="btn btn-primary" dir="ltr">http://</button>
    <button type="button" class="btn btn-primary" dir="ltr">https://</button>
<input type="text" />
</div>

:)

Answer 2

Remove add-on from class="add-on btn-group"