html - Twitter Bootstrap 按钮组作为文本输入插件不是很好

Question

这是我尝试过的：

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

但是组按钮使它变得丑陋padding！margin你可以在jsFiddle中看到它

我该如何解决？

Answer 1

add-on从中删除class="add-on btn-group"

Answer 2

尝试将您的代码更改为：

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

:)