Question

我有一个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>

是否有适当的方法来嵌套它们以便它们可以一起运作？提前感谢您的帮助。

Answer 1

也许这就是你需要的

＆＃13;

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

＆＃13;

Bootstrap - 将折叠与分段按钮结合使用

1 个答案: