2

我希望下拉按钮也可以像带有 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>

有谁能够帮我？

4

6 回答 6

9

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

于 2013-07-03T19:39:16.420 回答
1 
<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 版本）

于 2014-06-16T09:45:32.267 回答
0

类 ' btn-group ' 的属性为display:inline-block。将其更改为display: block应该会给您想要的效果。

于 2013-07-03T19:38:44.357 回答
0

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

于 2013-07-03T19:39:55.503 回答
0

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

于 2013-07-03T19:40:21.163 回答
0

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

我在这里发现了解决方案

<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>
于 2013-12-18T19:59:02.060 回答