html - 如何使表单元素与另一个元素共享 Bootstrap 列

Question

在我的代码中的多个地方，我需要将这个元素(一个地球符号)直接定位到文本框的右侧，几乎要碰到它。您可以通过执行以下操作来做到这一点

<div class="col-md-3">
        <input class="form-control" id="CustomTaskTitle" name="CustomTaskTitle" type="text" />
    </div>
<div class="col-md-1">
         <span class="glyphicon glyphicon-globe pull-left"></span>
</div>

但是你浪费了整个专栏。有什么解决办法吗？

**您必须将 jFiddle 输出窗口扩展到最大尺寸才能获得行布局

这是我的 JFiddle - http://jsfiddle.net/5Rhzh/

您会注意到字形自动位于文本框下方，因为该列中没有空间。

Answer 1

Bootstrap 已经有了这个。它是一个称为输入组的组件。 正确的做法是

<div class="col-md-3">
   <div class="input-group">
      <input class="form-control" id="CustomTaskTitle" name="CustomTaskTitle" type="text"  >
      <span class="glyphicon glyphicon-globe pull-left"></span>
   </div>
</div>

还有另外 3 列的空间