Question

我无法使用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>

Answer 1

一种解决方案可能是：

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

您还可以查看Input groups的官方文档。

Answer 2

您似乎希望在表格单元格中的小输入末尾添加一个图标。这应该作为一个按钮完成，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>

请注意，如果要控制此元素组的宽度，则需要将其包装在DIV中，并根据需要应用适当的类。

更新：JSFiddle demo

如何在bootstrap 3中的表格单元格中内联输入和字形图标？

2 个答案: