Twitter引导程序组输入框和跨度在td标记中

Question

我有一个表格，对于其中一个列，我希望该列中的每一行都包含一个输入框，并在输入框旁边有一个带加号的徽章。吼叫是我的代码

<td data-rowis-yellow=false data-parent='email'>
    <input type='text' placeholder='Email' value='{{this.attributes.email}}' title='{{this.attributes.email}}'>
    <span class="badge"><span class="glyphicon glyphicon-plus"></span></span>
</td>

如何在一行上创建一个输入框，徽章图标在文本框后面。我希望徽章图标位于文本框的右侧。任何想法如何实现这一目标？

这就是整个模板的样子

  <table class="table">
                <thead>
                    {{#each headers}}
                    <th>{{this}}</th>
                    {{/each}}
                </thead>
                <tbody>
                    {{#each all_rows}}
                    {{#if this.attributes.isMaster}}
                    <tr data-row-type='final' style="background-color: green;">
                    {{else}}
                    <tr data-row-type='staged' style="background-color: grey;">
                    {{/if}}
                        <td data-parent='not-conflict'>
                            {{#if_eq this.attributes.isMaster false}}
                                <input type='checkbox'>
                            {{/if_eq}}
                        </td>
                        <td data-rowis-yellow=false data-parent='firstname'><input type='text' placeholder='First' value='{{this.attributes.firstname}}' title='{{this.attributes.firstname}}'></td>
                        <td data-rowis-yellow=false data-parent='lastname'><input type='text' placeholder='Last' value='{{this.attributes.lastname}}' title='{{this.attributes.lastname}}'></td>
                        <td data-rowis-yellow=false data-parent='businessname'><input type='text' placeholder='Buisines' value='{{this.attributes.businessname}}' title='{{this.attributes.businessname}}'></td>
                        <td data-rowis-yellow=false data-parent='email'>
                            <input type='text' placeholder='Email' value='{{this.attributes.email}}' title='{{this.attributes.email}}'>
                            {{#if_eq this.attributes.isMaster false}}
                                <span class="badge hover-add" data-funct="AddExtraField"><span class="glyphicon glyphicon-plus"></span></span>
                            {{/if_eq}}
                        </td>
                        <td data-rowis-yellow=false data-parent='address'><input type='text' placeholder='Address' value='{{this.attributes.address}}' title='{{this.attributes.address}}'></td>
                        <td data-rowis-yellow=false data-parent='country'><input type='text' placeholder='Country' value='{{this.attributes.country}}' title='{{this.attributes.country}}'></td>
                        <td data-rowis-yellow=false data-parent='phones'>
                        {{#each this.attributes.phones}}
                            <input type='text' value='{{this}}' title='{{this}}'>
                            {{#if_eq ../this.attributes.isMaster false}}
                                <span class="badge hover-add" data-funct="AddExtraField"><span class="glyphicon glyphicon-plus"></span></span>
                            {{/if_eq}}
                        {{else}}
                            <input type='text' placeholder='Phone' value=''>
                        {{/each}}
                        </td>
                        <td data-rowis-yellow=false data-parent='twitters'>
                        {{#each this.attributes.twitters}}
                            <input type='text' value='{{this}}' title='{{this}}'>
                            {{#if_eq ../this.attributes.isMaster false}}
                                <span class="badge hover-add" data-funct="AddExtraField"><span class="glyphicon glyphicon-plus"></span></span>
                            {{/if_eq}}
                        {{else}}
                            <input type='text' placeholder='Twitter' value=''>
                        {{/each}}
                        </td>
                        <td data-rowis-yellow=false data-parent='linkedin'><input type='text' placeholder='LinkedIn' value='{{this.attributes.linkedin}}' title='{{this.attributes.linkedin}}'></td>
                        <td data-rowis-yellow=false data-parent='urls'>
                        {{#each this.attributes.urls}}
                            <input type='text' value='{{this}}' title='{{this}}'>
                            {{#if_eq ../this.attributes.isMaster false}}
                                <span class="badge hover-add" data-funct="AddExtraField"><span class="glyphicon glyphicon-plus"></span></span>
                            {{/if_eq}}
                        {{else}}
                            <input type='text' placeholder='Url' value=''>
                        {{/each}}
                        </td>
                    </tr>
                    {{/each}}
                </tbody>
            </table>

从我所知道的情况来看，这个专栏似乎没有足够大，可以将输入框和徽章放在彼此旁边。我可以将它们放在同一行上的唯一方法是将它们嵌套在bootstrap网格系统中，但这只是将2个元素放在彼此的顶部。

<td data-rowis-yellow=false data-parent='email'>
    <div class="row">
        <div class='col-md-6>
            <input type='text' placeholder='Email' value='{{this.attributes.email}}' title='{{this.attributes.email}}'>
        </div>
        <div class='col-md-6'>
            <span class="badge"><span class="glyphicon glyphicon-plus"></span></span>
        </div>
   </div>
</td>