Bootstrap - 列表组项中的输入组按钮

Question

嘿，我是引导程序的新手，但我想知道如何做某事。

我一直在尝试和寻找，但我似乎做不到。有谁知道如何获得这些：

<div class="input-group">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">Go!</button>
  </span>
  <input type="text" class="form-control">
</div>

抱歉，我现在无法提供图像，但在引导网站上，它位于按钮插件上。

变成一个list-group-item？我想要一个类似的按钮，但位于列表组项目上。

谁能帮我？

Answer 1

只需将 嵌套input-group到 中list-group-item，如下所示：

<ul class="list-group">
  <li class="list-group-item">
     <div class="input-group">
        <span class="input-group-btn">
            <button class="btn btn-default" type="button">Go!</button>
        </span>
        <input type="text" class="form-control">
    </div><!-- /input-group -->
  </li>
</ul>

如果你不想有额外的填充，你可以这样做：

1.) 添加一个特殊的类.list-group-item：

<li class="list-group-item group-btn">
    <div class="input-group">
        <span class="input-group-btn">
            <button class="btn btn-default" type="button">Go!</button>
        </span>
        <input type="text" class="form-control">
    </div><!-- /input-group -->
  </li>

2.) 为其提供以下 CSS：

li.group-btn {
  padding: 0;
}

工作示例（1.li 是基本示例，2.li 没有填充）