Bootstrap - 将折叠与分段按钮相结合答案

【问题标题】：Bootstrap - combine collapse with segmented buttonsBootstrap - 将折叠与分段按钮相结合
【发布时间】：2015-11-20 21:37:24
【问题描述】：

我有一个 Bootstrap 表单，想将分段按钮与折叠 js 结合起来。我想要一个带有两个分段按钮的搜索表单：“+”和“搜索”。单击“+”按钮时，会出现一个带有过滤器选项的可折叠井。井应延长搜索框的长度。我知道这是错误的，但我正在尝试这样的事情：

<div class="input-group">

  <input type="text" class="form-control">

  <div class="input-group-btn">
    <button type="button" class="btn btn-default" data-toggle="collapse" data-target="#collapseFilter">
      +
    </button>

    <button type="button" class="btn btn-default">
      Search
    </button>

    <div class="collapse" id="collapseFilter">
      <div class="well">
        Refine Search
      </div>
    </div>

  </div>
</div>

有没有合适的方法来嵌套它们，以便它们可以一起工作？提前感谢您的帮助。

【问题讨论】：

最好对它们都使用 col-lg-12 或类似的类，这样它们的长度就会相等..
你是指两个 div（输入组和输入组 btn）吗？这似乎确实改善了一些事情。井正在工作，但按钮没有正确排列。抱歉，我有点 CSS 文盲。
排队是什么意思？你想把它们排成一行吗？还是单独的行？
我希望它们像这里的示例一样排列：getbootstrap.com/components/#input-groups-buttons-multiple 现在它们在单独的行上，按钮之间有一些间距（因为我认为我删除了 input-group-btn 类） .
如果您希望所有这些都在一行中，您应该提供适当的行和列类。您可以检查您提供的链接上的下拉按钮

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

也许这就是你需要的

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>

<div class="input-group row">
  <input type="text" class="form-control">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default" data-toggle="collapse" data-target="#collapseFilter">
      +
    </button>

    <button type="button" class="btn btn-default">
      Search
    </button>
  </div>
</div>
<div class="row">
  <div class="collapse" id="collapseFilter">
    <div class="well">
      Refine Search
    </div>
  </div>
</div>

【讨论】：

太棒了。这正是我所追求的！非常感谢@Adarsh Mohan。