自定义内容的Bootstrap按钮下拉列表

Question

我想使用Bootstrap的button dropdown来显示表单组件，而不是其他带有附加信息的按钮列表。有可能吗？

Answer 1

是的，可以通过使用<li><a>text</a></li>替换按钮下拉列表中的常用<li>[form code] </li>来实现;我已将表单添加到下拉列表中，如此;

<强>代码：

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Click for form <span class="caret"></span>

    </button>
    <ul class="dropdown-menu" role="menu">
        <li>
          <div class="container">
            <div class="form-group">
                <label label-default="" for="exampleInputEmail1">Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail1"
                placeholder="Enter email">
            </div>
            <div class="form-group">
                <label label-default="" for="exampleInputPassword1">Password</label>
                <input type="password" class="form-control" id="exampleInputPassword1"
                placeholder="Password">
            </div>
            <div class="form-group">
                <label label-default="" for="exampleInputFile">File input</label>
                <input type="file" id="exampleInputFile">
                <p class="help-block">Example block-level help text here.</p>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox">Check me out</label>
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
            </div>
        </li>
    </ul>
</div>

预览

DEMO