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

Answer 2

您可以尝试以下操作：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/><br/><br/><br/><br/>
<div class="col-md-12">
  <div class="list-group">
    <div class="list-group-item">
      <div class="input-group">
      <span class="input-group-addon" id="basic-addon3">Name</span>
      <input id="nameText" type="text" class="form-control">
      <div class="input-group-btn">
        <button type="button" class="btn btn-danger">
          X
        </button>
      </div>
    </div>
    </div>
  </div>
   
    
  
</div>

＆＃13;

Answer 3

参考https://getbootstrap.com/components/#input-groups：你试过那个吗？

<div class="input-group">
  <span class="input-group-addon">TEXT</span>
  <input type="text" class="form-control" aria-label="your text">
  <span class="input-group-addon">x</span>
</div>

https://plnkr.co/edit/YyTtOzx7cro5DPw6qzmz?p=preview

Answer 4

@Faisal Ashfaq

我尝试了你的代码，在jsfiddle它看起来很不错，但在我的应用程序中我得到了一个大小错误。

 <div class="list-group">
      <div class="list-group-item">
            <div class="input-group">
                <span class="input-group-addon">NAME</span>
                <input type="text" class="form-control" placeholder="Suchbegriffe">
                <span class="input-group-btn">
                    <button type="button" class="btn btn-success">+</button>
                </span>
            </div>
      </div>
 </div>

看起来像这样

添加按钮比其他元素小一点。

具有文本输入和btn的Bootstrap list-group-item

4 个答案: