Html TwitterBootstrap组输入框和td标记中的范围
我有一个表,对于其中一列,我希望该列中的每一行都包含一个输入框,在输入框旁边有一个带加号的徽章。下面是我的密码Html TwitterBootstrap组输入框和td标记中的范围,html,css,node.js,twitter-bootstrap,pug,Html,Css,Node.js,Twitter Bootstrap,Pug,我有一个表,对于其中一列,我希望该列中的每一行都包含一个输入框,在输入框旁边有一个带加号的徽章。下面是我的密码 <td data-rowis-yellow=false data-parent='email'> <input type='text' placeholder='Email' value='{{this.attributes.email}}' title='{{this.attributes.email}}'> <span class="b
<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>
{{{#每个头}}
{{this}}
{{/每个}}
{{{每行所有行}
{{#如果this.attributes.isMaster}
{{else}
{{/if}
{{{#如果{u eq this.attributes.isMaster false}
{{/if_eq}
{{{#如果{u eq this.attributes.isMaster false}
{{/if_eq}
{{{#每个this.attributes.phones}
{{{if#u eq../this.attributes.isMaster false}
{{/if_eq}
{{else}
{{/每个}}
{{{#每个this.attributes.twitters}
{{{if#u eq../this.attributes.isMaster false}
{{/if_eq}
{{else}
{{/每个}}
{{{#每个this.attributes.url}
{{{if#u eq../this.attributes.isMaster false}
{{/if_eq}
{{else}
{{/每个}}
{{/每个}}
从我所能看出,这个栏目似乎不够大,无法容纳旁边的输入框和徽章。我能让它们在同一条线上的唯一方法是将它们嵌套在一个引导网格系统中,但这只是将这两个元素放在彼此的顶部
<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>
你能不能用你的代码做一个修改,我在右边有一个跨度,所以…看来你的实际工作,我已经在我自己的项目和这里用Bootstrap3.1.1测试了它。您使用的是什么版本的引导?您是否可以使用其他css覆盖引导样式?