3

我无法将我的字形图标与 bootstrap3 中的输入放在一行中。请问我该怎么做，我尝试了很多课程，但显然没有一个有效..字形仍然显示在另一行，输入太长。只有当我手动设置输入宽度时它才有效，这不是最好的方法..

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

2 回答 2

4

一种解决方案可能是：

   <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的官方文档。

于 2013-10-30T14:07:16.170 回答
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 演示

于 2013-09-26T17:53:58.200 回答