Question

如何使用Twitter Bootstrap在徽章内部进行下拉控制？这就是我想要做的事情：

<ul>
 <li>
  <span class="badge badge-success">
   Badge with dropdown
   <span class="dropdown-toggle" data-toggle="dropdown">&gt;&gt;&gt;</span>
   <ul class="dropdown-menu">
    <li>Alpha</li>
    <li>Beta</li>
    <li>Gamma</li>
   </ul>
  </span>
 </li>
</ul>

http://jsfiddle.net/HhqJN/

如果单击徽章末尾的大于符号，则应打开下拉列表。但由于它位于徽章内，因此下拉菜单的样式看起来很糟糕。如果我尝试在徽章外移动实际菜单列表，则下拉列表根本不起作用。有没有办法重置或撤消徽章的样式集？

Answer 1

这是我的自定义......

希望这对你有用......

演示： - http://jsfiddle.net/HhqJN/4/

HTML： -

<div class="btn-toolbar btn-custom">

              <div class="btn-group">
                <button class="btn btn-primary dropdown-toggle btn-mini" data-toggle="dropdown">Action <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><!-- /btn-group -->
              <div class="btn-group">
                <button class="btn btn-danger dropdown-toggle btn-mini" data-toggle="dropdown">Danger <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><!-- /btn-group -->

            </div>

...谢谢

在徽章中使用twitter bootstrap下拉控件

1 个答案: