如何使用bootstrap制作像搜索框一样的gmail

Question

我正在尝试使用类似于gmail搜索框的其他选项来实现输入字段。您可以在下面的屏幕截图中看到它。

当您点击插入符号时，会显示其他表单：

目前，我正在努力在点击插入符号后显示漂亮的外观。任何人都知道如何使用Bootstrap实现这一目标？

这是一个jsfiddle链接： https://jsfiddle.net/x1sfs9xb/1/

<div class="container">
  <div class="row">
    <div class="input-group">
      <input type="text" class="form-control">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li>
            <form action="#" class="form-horizontal">
              <div class="row">
                <div class="col-sm-12">
                  <div class="form-group">
                    <label class="col-sm-3 control-label" for="name">Input 1</label>
                    <div class="col-sm-9">
                      <input class="form-control" id="name" name="input1" type="text" />
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-12">
                  <div class="form-group">
                    <label class="col-sm-3 control-label" for="name">Input2</label>
                    <div class="col-sm-9">
                      <input class="form-control" id="name" name="input2" type="text" />
                    </div>
                  </div>
                </div>
              </div>
              <p>
                <input class="btn action-button pull-right" name="commit" type="submit" value="Save">
              </p>
            </form>
          </li>
        </ul>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
      </div>
    </div>
  </div><div class="row">
    <div class="col-md-12">
      <h1>Some content</h1>
    </div>
  </div>
</div>

Answer 1

你可以通过使用一点CSS和JS实现这一点：

CSS（您的下拉菜单相对于input-group-btn，因此您必须将其位置更改为静态 - 现在您的下拉菜单与input-group相关：

.input-group-btn {
  position: static;
}
.dropdown-menu {
  left: 0;
}

JS（获取输入的宽度并将其分配到下拉菜单，同时在浏览器调整大小时更改它）：

var inputWidth = $('.form-control').outerWidth();
$('.dropdown-menu').css('width', inputWidth);
$(window).resize(function () {
    inputWidth = $('.form-control').outerWidth();
    $('.dropdown-menu').css('width', inputWidth);
});

的 JSFIDDLE