CSS 如何在bootstrap3的表格单元格中内联输入和字形图标？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19032682/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to inline input and glyph icon in table cell in bootstrap3?
提问by Ladiko
I cannot get my glyph icon in one line with input in bootstrap3. How can I do it please, I tried many classes, but evidently none of them worked.. The glyphicon is still displayed on another line , the input is too long. It works only if I set manually width of input, and that is not the best way..
我无法将字形图标与 bootstrap3 中的输入放在一行中。请问我该怎么做，我尝试了很多类，但显然它们都不起作用.. glyphicon 仍然显示在另一行上，输入太长。只有当我手动设置输入宽度时它才有效，这不是最好的方法..
<table class="table table-bordered table-striped table-hover">
<tbody>
<tr>
<td class="search-header">Legend:</td>
<td>
<div class="row-fluid form-inline">
<input class="form-control input-sm" type="text" id="inputSmall">
<span class="glyphicon glyphicon-question-sign"></span>
</div>
</td>
</tr>
</tbody>
</table>
回答by Adrian
One solution could be:
一种解决方案可能是：
<table class="table table-bordered table-striped table-hover">
<tbody>
<tr>
<td class="search-header">Legend:</td>
<td>
<div class="col-lg-12 input-group">
<input type="text" class="form-control" id="inputSmall">
<a class="input-group-addon" href="#"><span class="glyphicon glyphicon-question-sign"></span></a>
</div>
</td>
</tr>
</tbody>
</table>
You may also check the official documentation of Input groups.
您还可以查看Input groups的官方文档。
回答by Phil Nicholas
It seems you're looking to append an icon at the end of a small input, within a table cell. This should be done as a button, and the Bootstrap 3 code would be as follows:
您似乎希望在表格单元格内的小输入末尾附加一个图标。这应该作为一个按钮来完成，Bootstrap 3 代码如下：
<table class="table table-bordered table-striped table-hover">
<tbody>
<tr>
<td class="search-header">Legend:</td>
<td><div class="input-group">
<input type="text" class="form-control input-sm" id="inputSmall">
<span class="input-group-btn">
<button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-question-sign"></i></button>
</span>
</div>
</td>
</tr>
</tbody>
</table>
Note that if you want to control the width of this element group you'll need to wrap it in a DIV and apply the appropriate class for whatever width you desire.
请注意，如果您想控制此元素组的宽度，您需要将它包装在一个 DIV 中，并为您想要的任何宽度应用适当的类。
UPDATE: JSFiddle demo
更新：JSFiddle 演示
