引导 - 列表组中的输入组按钮项目

嘿，我是一个在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>

对不起，我不能完全提供图像，但现在引导网站上它是here上的按钮进行附加组件。

变成list-group-item？我想要一个像这样的按钮，但是在列表组项目上。

任何人都可以帮助我吗？

来源

2014-10-02 Lokuzt

你是否已经导入了twitter bootstrap'bootstrap.min.css'，并且确定它有一个父元素（在树的某个地方） .container'还是'.container-fluid'？ – 2014-10-02 13:58:29

我不确定你的理解。我在那里的代码就是让你知道我想在列表组项目中实现什么。我想要一个像这样的按钮的list-group-item。 – Lokuzt 2014-10-02 13:59:52

就窝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没有填充）

来源

2014-10-02 14:18:28 Sebsemillia

引导 - 列表组中的输入组按钮项目

回答

相关问题