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

Question

嘿，我是 bootstrap 的新人，但我想知道如何做某事。

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

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

抱歉，我现在不能完全提供图像，但在 bootstrap 网站上它是 here在按钮插件上。

进入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;
}

Working Example (1.li 是基本示例，2.li 没有填充)