twitter-bootstrap - Bootstrap list-group-item with text-input 和 btn

Question

我需要一些关于 Twitter bootstrap 的帮助。

我有一个包含 n 个项目的列表组。每个项目都有一个名称，需要一个删除按钮和一个小文本输入框。

------------------------------------
|        ______________     ___     |
| NAME   |  TEXT INPUT |   | X |    |
|        --------------     ---     |
------------------------------------

我尝试了很多方法，包括输入组……但我没有得到很好的结果。

这是我的一个尝试

<a class="list-group-item" href="#">
    ITEM NAME
    <div class="input-group input-group-sm pull-right">
        <input class="form-control" type="text" >
    </div>
</a>

Answer 1

您可以执行以下操作

<div class="col-md-12">
  <div class="form-group">
    <label for="nameText" class="control-label">Name</label>
    <div class="input-group">
      <input type="text" class="form-control">
      <div class="input-group-btn">
        <button id="nameText" type="button" class="btn btn-warning">
          X
        </button>
      </div>
    </div>
  </div>
</div>

这里是工作 demo

如果您想将“姓名”显示为文本的一部分，您也可以执行以下操作

<div class="col-md-12">
  <div class="form-group">
    <div class="input-group">
      <span class="input-group-addon">Name</span>
      <input type="text" class="form-control">
      <div class="input-group-btn">
        <button type="button" class="btn btn-warning">
          X
        </button>
      </div>
    </div>
  </div>
</div>

这是另一个工作 demo