自定义引导下拉列表的问题

Question

我正在尝试使用输入列表和用于某些功能的按钮制作 "dropdown" 类型的效果。基本上，有一个table，然后是一个6个输入的列表，可以在这个table上过滤结果。我的视图已完成并正常工作（尽管我删除了 fiddle 的功能）。

我明白我需要使用

的大体布局

<ul>
   <li>
      <div>
          <input/>
      <div>
   </li>
   <li>
      <div>
          <input/>
      </div>
   </li>
</ul>

因为<div>不能直接进入<ul>

我做错了什么？

link to what i want to see after my dropdown is clicked

Answer 1

这可能会有所帮助。

.menu-large {
  position: static !important;
  text-align: center;
}
.megamenu {
  padding: 20px 0px;
  width: 100%;
  border: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
  <a class="navbar-brand" href="#">
    <img alt="Brand" src="http://placehold.it/15x15/f00" />
  </a>
  <a class="navbar-brand pull-right" href="#">
    <img alt="Brand" src="http://placehold.it/15x15/f00" />
  </a>

  <div class="navbar-collapse">
    <ul class="nav navbar-nav">
      <li class="dropdown menu-large"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Stuff <span class="caret"></span></a>

        <ul class="dropdown-menu megamenu">
          <li>
            <div class="col-lg-12">
              <form>
                <div class="row">
                  <div class="col-sm-3">
                    <div class="form-group">
                      <input type="text" class="form-control" id="input1" placeholder="Input" />
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="form-group">
                      <input type="text" class="form-control" id="input2" placeholder="Input" />
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="form-group">
                      <input type="text" class="form-control" id="input3" placeholder="Input" />
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="form-group">
                      <input type="text" class="form-control" id="input4" placeholder="Input" />
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-4">
                    <div class="form-group">
                      <select class="form-control">
                        <option value="1">Option 1</option>
                        <option value="2">Option 2</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="form-group">
                      <select class="form-control">
                        <option value="1">Option 1</option>
                        <option value="2">Option 2</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="form-group">
                      <button type="button" class="btn btn-sm-update btn-primary ">UPDATE</button>
                      <button type="button" class="btn btn-sm-x btn-default transparent glyphicon glyphicon-remove"></button>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Answer 2

this怎么样？

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action</button>
    <div class="dropdown-menu">
        <!-- dropdown content -->
    </div>
</div>

当然，您可以将 dropdown-menu 的宽度设置为您想要的任何值。

自定义引导下拉列表的问题

Trouble with custom boostrap dropdown list

dropdownbox

twitter-bootstrap