0

我正在使用引导框架来开发响应式酒店搜索页面。我需要一个带有块级输入的分段下拉组，如下图所示。

我需要的示例图像

在这里，输入将是全宽的，向左浮动到操作下拉菜单。文本“操作”是动态的，将根据用户从下拉列表中的选择而变化。所以下拉菜单的宽度可能会增加。

输入文本应仅从左侧开始到下拉菜单，并且也适合全宽。

我处理了这个静态，但是在进行响应式和下拉文本增加时，我遇到了很多宽度问题。

有谁知道如何实现这个？

高级感谢您的帮助..

编辑：这是一个 Js 小提琴：http: //jsfiddle.net/surjithctly/mP8ab/

HTML

<form class="bs-docs-example">
            <div class="input-prepend">
              <div class="btn-group" style="
    z-index: 1;
">
                <button class="btn" tabindex="-1">Action</button>
                <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div>
              <input type="text" class="input-block-level">
            </div>

          </form>
4

0 回答 0