twitter-bootstrap – 文本输入内的Twitter Bootstrap下拉

发布时间：2020-12-17 21:25:40 所属栏目：安全来源：网络整理

导读：嗨,我想使用Twitter Bootstrap在文本输入中使用下拉菜单构建表单.像这样 – 我只是以这种方式做到了 div class="input-append" form method="get" action="/option" class="navbar-search" id="searchForm" input type="text" size="16" placeholder="Search

嗨,我想使用Twitter Bootstrap在文本输入中使用下拉菜单构建表单.像这样 – >

我只是以这种方式做到了

<div class="input-append">
    <form method="get" action="/option" class="navbar-search" id="searchForm">
      <input type="text" size="16" placeholder="Search string" name="query">
      <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle searchMain" style="width: 150 px;"><span>Option 1</span> <b class="caret"></b></button>
      <ul class="dropdown-menu" id="search-dropdown" style="left: 220px;">
        <li><a href="#" id="option-1">Option 1</a></li>
        <li><a href="#" id="option-2">Option 2</a></li>
        <li><a href="#" id="option-3">Option 3</a></li>
      </ul>
      <button type="submit" class="btn btn-primary"><i class="icon-white icon-search"></i></button>
    </form>
  </div>

但在这种情况下,droptdown不在文本输入中.是否可以使用Twitter Bootstrap将下拉列入文本输入内？

解决方法

看一下bootstrap文档的Forms部分： http://twitter.github.com/bootstrap/base-css.html#forms

你的标记看起来像这样：

<div class="input-append">
  <input class="span2" id="appendedDropdownButton" type="text">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      Action
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
</div>

这里的关键是input-append类.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!