Question

我希望下拉按钮也能像整个btn-block类的按钮一样覆盖整个页面。这是我目前的代码：http://jsfiddle.net/wLUkx/1/

这里是代码：

    <div class="btn-group">
    <a class="btn btn-primary btn-block btn-large dropdown-lead dropdown-toggle" data-toggle="dropdown" href="#">
   xx
    <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <form>
            <input type="hidden" name="game" value="ttt-play">
            <button class="btn btn-link">xx</button>
        </form>
        <hr>
        <form>
            <input type="hidden" name="game" value="ttt-newgame">
            <button class="btn btn-link">xx</button>
        </form>
        <form>
            <input type="hidden" name="game" value="ttt-joingame">
            <button class="btn btn-link">xx</button>
        </form>
    </ul>

    </div>
        <div class="btn-group">
    <a class="btn btn-primary btn-block btn-large dropdown-lead dropdown-toggle" data-toggle="dropdown" href="#">
    yyy
    <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <form>
            <input type="hidden" name="game" value="ttt-play">
            <button class="btn btn-link">yyy</button>
        </form>
        <hr>
        <form>
            <input type="hidden" name="game" value="ttt-newgame">
            <button class="btn btn-link">yyy</button>
        </form>
        <form>
            <input type="hidden" name="game" value="ttt-joingame">
            <button class="btn btn-link">yyy</button>
        </form>
    </ul>
 </div>
 <form>
    <input type="hidden" name="game" value="paint">
    <button class="btn btn-large btn-block btn-primary" type="submit">paint</button>
</form>

有人能帮助我吗？

Answer 1

将btn-block添加到<div class="btn-group">

Answer 2

<div class="btn-group btn-group-justified">
  <button type="button" style="width:100%;" class="btn btn-success btn-lg dropdown-toggle" data-toggle="dropdown">
    actions <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li class="btn-group-justified"><a href="#">Separated link</a></li>
    <li class="btn-group-justified"><a href="#">Separated link</a></li>
    <li class="btn-group-justified"><a href="#">Separated link</a></li>
    <li class="divider"></li>
    <li class="btn-group-justified"><a href="#">Separated link</a></li>
  </ul>
</div>

http://jsfiddle.net/wLUkx/14/（但对于twitter bootstrap 3.x verison）

Answer 3

“ btn-group ”类的属性为display:inline-block。将此更改为display: block可以为您提供所需的效果。

Answer 4

将此内容添加到您的css .btn-group{display:block;}

Answer 5

问题不在于小提琴中的按钮，而是容器。 'btn-group'类是内联的，它使按钮成为最小宽度。您可以从这些容器中删除“btn-group”，也可以创建一个新类，使其“宽度：100％;”

Answer 6

对我有用的是将btn-block添加到 <div class="btn-group"和<a class="btn">

我发现了解决方案here

<div class="btn-group btn-block">
    <a class="btn btn-primary btn-block btn-large dropdown-lead dropdown-toggle" data-toggle="dropdown" href="#">
        xx
        <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <form>
            <input type="hidden" name="game" value="ttt-play">
            <button class="btn btn-link">xx</button>
        </form>
        <hr>
        <form>
            <input type="hidden" name="game" value="ttt-newgame">
            <button class="btn btn-link">xx</button>
        </form>
        <form>
            <input type="hidden" name="game" value="ttt-joingame">
            <button class="btn btn-link">xx</button>
        </form>
    </ul>
</div>

Twitter引导按钮下拉列表btn-block

6 个答案: