Bootstrap-结合折叠和分段按钮

Bootstrap - combine collapse with segmented buttons

本文关键字：分段 按钮 折叠 结合 Bootstrap-      更新时间：2023-09-26

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

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

有没有一种合适的方法来嵌套它们，使它们能够一起工作？提前感谢您的帮助。

也许这就是您所需要的

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

相关文章：