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>

很抱歉，我现在无法提供相应的图片，但在自助网站上，它是here的Button Addons。

进入list-group-item？我想要一个像这样的按钮但是在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没有填充）

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

1 个答案: