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

Question

我想使用Bootstrap的按钮下拉列表来显示表单组件,而不是其他带有附加信息的按钮列表.可能吗？

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